Tested
None
75 Errors, 79 Warnings
94%
All issues (full page)
Issues not in common components
80 / 171 tests passed
aria-label doesn't match visible text
aria-label ne correspond pas au texte visible
Voice control users can't activate element
Les utilisateurs de commande vocale ne peuvent pas activer l'élément
Voice control users
Utilisateurs de commande vocale
Touchpoint Accessible Names Noms accessibles
Impact Medium Moyen
WCAG . WCAG .
WCAG . WCAG .
WCAG 2 WCAG 2
WCAG 3 WCAG 3
Location
/html[1]/body[1]/main[1]/div[2]/div[1]/div[5]/form[1]
<form action="/contact-us/#wpcf7-f166-p16-o1" method="post" class="wpcf7-form init" aria-label="Contact form" novalidate="novalidate" data-status="init">
<fieldset class="hidden-fields-container"><inp
aria-label doesn't match visible text
aria-label ne correspond pas au texte visible
Voice control users can't activate element
Les utilisateurs de commande vocale ne peuvent pas activer l'élément
Voice control users
Utilisateurs de commande vocale
Touchpoint Accessible Names Noms accessibles
Impact Medium Moyen
WCAG . WCAG .
WCAG . WCAG .
WCAG 2 WCAG 2
WCAG 3 WCAG 3
Location
/html[1]/body[1]/footer[1]
<footer role="contentinfo" aria-label="Footer">
<div class="footer-area-top entry-container">
<div class="container">
Form input has no associated label
Le champ de formulaire n'a pas d'étiquette associée
Without labels, users don't know what information to enter in form fields.
Sans étiquettes, les utilisateurs ne savent pas quelles informations saisir dans les champs de formulaire.
Screen reader users who cannot identify form fields, users with cognitive disabilities.
Utilisateurs de lecteurs d'écran qui ne peuvent pas identifier les champs de formulaire, utilisateurs avec des déficiences cognitives.
Touchpoint Forms Formulaires
Impact High Élevé
WCAG , WCAG ,
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 2 WCAG 2
WCAG 3 WCAG 3
WCAG 3 WCAG 3
Location
/html[1]/body[1]/main[1]/div[2]/div[1]/div[5]/form[1]/div[3]/div[1]/textarea[1]
<textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid rgb(193, 193, 193); margin: 10px 25px; padding: 0px; r
Static inline SVG element does not have role="img" attribute, causing screen readers to either skip it entirely or attempt to navigate through its internal SVG structure rather than treating it as a single image
L'élément SVG statique en ligne n'a pas d'attribut role="img", ce qui fait que les lecteurs d'écran l'ignorent entièrement ou tentent de naviguer dans sa structure SVG interne plutôt que de le traiter comme une seule image
Inline SVG elements are not automatically treated as images by assistive technologies. Without role="img", screen readers may traverse the SVG's internal DOM structure (paths, circles, polygons), announcing confusing technical details instead of the image's meaning. Some screen readers skip unlabeled SVGs entirely. The role="img" attribute signals to assistive technologies that the SVG should be treated as a single image unit with an accessible name, just like an HTML img element. This is required for static SVG graphics (icons, logos, illustrations) but not for interactive SVG widgets or purely decorative SVGs (which should use aria-hidden="true").
Les éléments SVG en ligne ne sont pas automatiquement traités comme des images par les technologies d'assistance. Sans role="img", les lecteurs d'écran peuvent parcourir la structure DOM interne du SVG (chemins, cercles, polygones), annonçant des détails techniques confus au lieu de la signification de l'image. Certains lecteurs d'écran ignorent entièrement les SVG non étiquetés. L'attribut role="img" signale aux technologies d'assistance que le SVG doit être traité comme une unité d'image unique avec un nom accessible, tout comme un élément img HTML. Ceci est requis pour les graphiques SVG statiques (icônes, logos, illustrations) mais pas pour les widgets SVG interactifs ou les SVG purement décoratifs (qui devraient utiliser aria-hidden="true").
Blind and low vision users using screen readers who need SVG images to be announced with their accessible names rather than technical SVG markup, users with cognitive disabilities who benefit from clear image identification, keyboard users navigating through page content who need to understand what visual content represents
Utilisateurs aveugles et malvoyants utilisant des lecteurs d'écran qui ont besoin que les images SVG soient annoncées avec leurs noms accessibles plutôt qu'avec le balisage SVG technique, utilisateurs avec des handicaps cognitifs qui bénéficient d'une identification claire des images, utilisateurs de clavier naviguant dans le contenu de la page qui ont besoin de comprendre ce que représente le contenu visuel
Touchpoint Images Images
Impact High Élevé
WCAG , WCAG ,
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 2 WCAG 2
Location
/html[1]/body[1]/main[1]/div[2]/div[1]/div[3]/div[1]/span[1]/svg[1]
<svg class="" style="display:inline-block;vertical-align:middle" width="18" height="18" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path style="fill:#565D66" d="M953 45.8l-188.4-43.4c-
Static inline SVG element does not have role="img" attribute, causing screen readers to either skip it entirely or attempt to navigate through its internal SVG structure rather than treating it as a single image
L'élément SVG statique en ligne n'a pas d'attribut role="img", ce qui fait que les lecteurs d'écran l'ignorent entièrement ou tentent de naviguer dans sa structure SVG interne plutôt que de le traiter comme une seule image
Inline SVG elements are not automatically treated as images by assistive technologies. Without role="img", screen readers may traverse the SVG's internal DOM structure (paths, circles, polygons), announcing confusing technical details instead of the image's meaning. Some screen readers skip unlabeled SVGs entirely. The role="img" attribute signals to assistive technologies that the SVG should be treated as a single image unit with an accessible name, just like an HTML img element. This is required for static SVG graphics (icons, logos, illustrations) but not for interactive SVG widgets or purely decorative SVGs (which should use aria-hidden="true").
Les éléments SVG en ligne ne sont pas automatiquement traités comme des images par les technologies d'assistance. Sans role="img", les lecteurs d'écran peuvent parcourir la structure DOM interne du SVG (chemins, cercles, polygones), annonçant des détails techniques confus au lieu de la signification de l'image. Certains lecteurs d'écran ignorent entièrement les SVG non étiquetés. L'attribut role="img" signale aux technologies d'assistance que le SVG doit être traité comme une unité d'image unique avec un nom accessible, tout comme un élément img HTML. Ceci est requis pour les graphiques SVG statiques (icônes, logos, illustrations) mais pas pour les widgets SVG interactifs ou les SVG purement décoratifs (qui devraient utiliser aria-hidden="true").
Blind and low vision users using screen readers who need SVG images to be announced with their accessible names rather than technical SVG markup, users with cognitive disabilities who benefit from clear image identification, keyboard users navigating through page content who need to understand what visual content represents
Utilisateurs aveugles et malvoyants utilisant des lecteurs d'écran qui ont besoin que les images SVG soient annoncées avec leurs noms accessibles plutôt qu'avec le balisage SVG technique, utilisateurs avec des handicaps cognitifs qui bénéficient d'une identification claire des images, utilisateurs de clavier naviguant dans le contenu de la page qui ont besoin de comprendre ce que représente le contenu visuel
Touchpoint Images Images
Impact High Élevé
WCAG , WCAG ,
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 2 WCAG 2
Location
/html[1]/body[1]/main[1]/div[2]/div[1]/div[3]/div[2]/span[1]/svg[1]
<svg class="" style="display:inline-block;vertical-align:middle" width="18" height="18" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path style="fill:#565D66" d="M928 128h-832c-53 0-96
Form uses aria-label instead of visible heading or label
Le formulaire utilise aria-label au lieu d'un titre ou d'une étiquette visible
Visible labels benefit all users
Les étiquettes visibles bénéficient à tous les utilisateurs
All users, especially those with cognitive disabilities
Tous les utilisateurs, en particulier ceux avec des handicaps cognitifs
Touchpoint Landmarks Points de repère
Impact Medium Moyen
WCAG , WCAG ,
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG 2 WCAG 2
WCAG 2 WCAG 2
WCAG 3 WCAG 3
WCAG 3 WCAG 3
WCAG 3 WCAG 3
Location
/html[1]/body[1]/main[1]/div[2]/div[1]/div[5]/form[1]
<form action="/contact-us/#wpcf7-f166-p16-o1" method="post" class="wpcf7-form init" aria-label="Contact form" novalidate="novalidate" data-status="init">
<fieldset class="hidden-fields-container"><inp
hreflang language code not recognized
Code de langue hreflang non reconnu
Invalid hreflang codes provide incorrect information about linked resources
Les codes hreflang invalides fournissent des informations incorrectes sur les ressources liées
Screen reader users, search engines
Utilisateurs de lecteurs d'écran, moteurs de recherche
Touchpoint Language Langue
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
Location
undefined/html[1]/head[1]/link[4]
<link rel="alternate" hreflang="x-default" href="https://cnib-accesslabs.ca/contact-us/">
In-page link (skip link, table of contents link, or fragment identifier) points to a target element that lacks appropriate tabindex, preventing focus management from working properly when the link is activated
Le lien interne (lien d'évitement, lien de table des matières, ou identifiant de fragment) pointe vers un élément cible qui manque de tabindex approprié, empêchant la gestion du focus de fonctionner correctement lorsque le lien est activé
When users activate an in-page link (like a skip link or table of contents link), browsers should move both scroll position and keyboard focus to the target element. However, non-interactive elements (like <div>, <span>, <h2>) are not naturally focusable. Without tabindex="-1" on the target, keyboard focus remains at the link while the page scrolls, creating a disconnect between visual position and keyboard position. This is especially problematic for skip links - a user activates "Skip to main content" expecting to bypass navigation, but their keyboard focus stays in the navigation, forcing them to tab through everything anyway. The skip link becomes useless. Screen reader users expect focus to move with the visual position, and when it doesn't, they become disoriented about their location on the page.
Lorsque les utilisateurs activent un lien interne (comme un lien d'évitement ou un lien de table des matières), les navigateurs devraient déplacer à la fois la position de défilement et le focus clavier vers l'élément cible. Cependant, les éléments non-interactifs (comme <div>, <span>, <h2>) ne sont pas naturellement focalisables. Sans tabindex="-1" sur la cible, le focus clavier reste au niveau du lien pendant que la page défile, créant une déconnexion entre la position visuelle et la position du clavier. Ceci est particulièrement problématique pour les liens d'évitement - un utilisateur active "Aller au contenu principal" en s'attendant à contourner la navigation, mais son focus clavier reste dans la navigation, l'obligeant à parcourir tout de même. Le lien d'évitement devient inutile. Les utilisateurs de lecteurs d'écran s'attendent à ce que le focus se déplace avec la position visuelle, et quand ce n'est pas le cas, ils deviennent désorientés quant à leur emplacement sur la page.
Keyboard users relying on skip links to bypass repetitive navigation who find the skip link non-functional, screen reader users who expect focus and reading position to move together, users with motor disabilities who use skip links to reduce keystrokes, users navigating table of contents who expect focus to move to the target heading, users with cognitive disabilities who are confused when focus position doesn't match visual position, and developers implementing WCAG 2.4.1 Bypass Blocks
Utilisateurs de clavier qui s'appuient sur les liens d'évitement pour contourner la navigation répétitive et qui trouvent le lien d'évitement non fonctionnel, utilisateurs de lecteurs d'écran qui s'attendent à ce que le focus et la position de lecture se déplacent ensemble, utilisateurs avec des handicaps moteurs qui utilisent les liens d'évitement pour réduire les frappes de touches, utilisateurs naviguant dans une table des matières qui s'attendent à ce que le focus se déplace vers l'en-tête cible, utilisateurs avec des handicaps cognitifs qui sont confus lorsque la position du focus ne correspond pas à la position visuelle, et développeurs implémentant WCAG 2.4.1 Contournement de blocs
Touchpoint Links Liens
Impact High Élevé
WCAG , WCAG ,
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 2 WCAG 2
WCAG 2 WCAG 2
WCAG 3 WCAG 3
WCAG 4 WCAG 4
Location
/html[1]/body[1]/main[1]/div[1]/div[1]/h1[1]
<h1 id="headline" class="page-title">Contact Us</h1>
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space
Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.
Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.
Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns
Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents
Touchpoint Links Liens
Impact Medium Moyen
WCAG , WCAG ,
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 2 WCAG 2
WCAG 2 WCAG 2
WCAG 3 WCAG 3
Location
//body/a[1]
<a class="skip-link screen-reader-text" href="#headline">Skip to content</a>
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space
Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.
Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.
Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns
Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents
Touchpoint Links Liens
Impact Medium Moyen
WCAG , WCAG ,
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 2 WCAG 2
WCAG 2 WCAG 2
WCAG 3 WCAG 3
Location
//body/header[1]/div[1]/div[1]/div[2]/div[1]/div[1]/div[1]/a[1]
<a href="https://cnib-accesslabs.ca/contact-us/" class="wpml-ls-link">
<span class="wpml-ls-native">English</span></a>
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space
Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.
Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.
Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns
Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents
Touchpoint Links Liens
Impact Medium Moyen
WCAG , WCAG ,
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 2 WCAG 2
WCAG 2 WCAG 2
WCAG 3 WCAG 3
Location
//body/header[1]/div[1]/div[1]/div[2]/div[1]/div[1]/div[2]/a[1]
<a href="https://cnib-accesslabs.ca/fr/contactez-nous/" class="wpml-ls-link">
<span class="wpml-ls-native" lang="fr">Français</span><span class="wpml-ls-display"><span class="wpml-
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space
Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.
Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.
Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns
Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents
Touchpoint Links Liens
Impact Medium Moyen
WCAG , WCAG ,
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 2 WCAG 2
WCAG 2 WCAG 2
WCAG 3 WCAG 3
Location
//li[@id="menu-item-3805"]/a[1]
<a href="https://cnib-accesslabs.ca/about-us/">About Us</a>
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space
Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.
Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.
Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns
Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents
Touchpoint Links Liens
Impact Medium Moyen
WCAG , WCAG ,
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 2 WCAG 2
WCAG 2 WCAG 2
WCAG 3 WCAG 3
Location
//li[@id="menu-item-3806"]/a[1]
<a href="https://cnib-accesslabs.ca/become-a-tester/">Become a Tester</a>
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space
Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.
Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.
Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns
Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents
Touchpoint Links Liens
Impact Medium Moyen
WCAG , WCAG ,
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 2 WCAG 2
WCAG 2 WCAG 2
WCAG 3 WCAG 3
Location
//li[@id="menu-item-6054"]/a[1]
<a href="https://cnib-accesslabs.ca/inclusive-cx-2/">Inclusive CX</a>
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space
Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.
Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.
Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns
Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents
Touchpoint Links Liens
Impact Medium Moyen
WCAG , WCAG ,
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 2 WCAG 2
WCAG 2 WCAG 2
WCAG 3 WCAG 3
Location
//li[@id="menu-item-3809"]/a[1]
<a href="https://cnib-accesslabs.ca/news/">News</a>
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space
Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.
Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.
Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns
Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents
Touchpoint Links Liens
Impact Medium Moyen
WCAG , WCAG ,
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 2 WCAG 2
WCAG 2 WCAG 2
WCAG 3 WCAG 3
Location
//li[@id="menu-item-3810"]/a[1]
<a href="https://cnib-accesslabs.ca/contact-us/" aria-current="page">Contact Us</a>
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space
Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.
Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.
Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns
Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents
Touchpoint Links Liens
Impact Medium Moyen
WCAG , WCAG ,
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 2 WCAG 2
WCAG 2 WCAG 2
WCAG 3 WCAG 3
Location
//ul[@id="menu-main-menu-1"]/li[1]/ul[1]/li[1]/a[1]
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/">Inclusive Built Environment Overview</a>
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space
Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.
Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.
Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns
Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents
Touchpoint Links Liens
Impact Medium Moyen
WCAG , WCAG ,
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 2 WCAG 2
WCAG 2 WCAG 2
WCAG 3 WCAG 3
Location
//ul[@id="menu-main-menu-1"]/li[1]/ul[1]/li[2]/a[1]
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/lived-experience-accessibility-testing/">Lived Experience Accessibility Testing</a>
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space
Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.
Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.
Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns
Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents
Touchpoint Links Liens
Impact Medium Moyen
WCAG , WCAG ,
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 2 WCAG 2
WCAG 2 WCAG 2
WCAG 3 WCAG 3
Location
//ul[@id="menu-main-menu-1"]/li[1]/ul[1]/li[3]/a[1]
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/navigation-wayfinding/">Navigation & Wayfinding</a>
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space
Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.
Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.
Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns
Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents
Touchpoint Links Liens
Impact Medium Moyen
WCAG , WCAG ,
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 2 WCAG 2
WCAG 2 WCAG 2
WCAG 3 WCAG 3
Location
//ul[@id="menu-main-menu-1"]/li[1]/ul[1]/li[4]/a[1]
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/accessible-signage/">Accessible Signage</a>
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space
Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.
Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.
Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns
Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents
Touchpoint Links Liens
Impact Medium Moyen
WCAG , WCAG ,
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 2 WCAG 2
WCAG 2 WCAG 2
WCAG 3 WCAG 3
Location
//ul[@id="menu-main-menu-1"]/li[1]/ul[1]/li[5]/a[1]
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/communication-materials/">Communication Materials</a>
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space
Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.
Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.
Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns
Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents
Touchpoint Links Liens
Impact Medium Moyen
WCAG , WCAG ,
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 2 WCAG 2
WCAG 2 WCAG 2
WCAG 3 WCAG 3
Location
//ul[@id="menu-main-menu-1"]/li[1]/ul[1]/li[6]/a[1]
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/workplace-assessment/">Workplace Assessment</a>
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space
Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.
Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.
Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns
Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents
Touchpoint Links Liens
Impact Medium Moyen
WCAG , WCAG ,
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 2 WCAG 2
WCAG 2 WCAG 2
WCAG 3 WCAG 3
Location
//ul[@id="menu-main-menu-1"]/li[1]/ul[1]/li[7]/a[1]
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/research-planning/">Research & Planning</a>
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space
Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.
Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.
Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns
Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents
Touchpoint Links Liens
Impact Medium Moyen
WCAG , WCAG ,
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 2 WCAG 2
WCAG 2 WCAG 2
WCAG 3 WCAG 3
Location
//ul[@id="menu-main-menu-1"]/li[1]/ul[1]/li[8]/a[1]
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/be-my-eyes/">Be My Eyes</a>
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space
Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.
Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.
Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns
Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents
Touchpoint Links Liens
Impact Medium Moyen
WCAG , WCAG ,
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 2 WCAG 2
WCAG 2 WCAG 2
WCAG 3 WCAG 3
Location
//ul[@id="menu-main-menu-1"]/li[2]/ul[1]/li[1]/a[1]
<a href="https://cnib-accesslabs.ca/inclusive-digital-design-testing/">Inclusive Digital Design & Testing Overview</a>
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space
Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.
Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.
Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns
Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents
Touchpoint Links Liens
Impact Medium Moyen
WCAG , WCAG ,
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 2 WCAG 2
WCAG 2 WCAG 2
WCAG 3 WCAG 3
Location
//ul[@id="menu-main-menu-1"]/li[2]/ul[1]/li[2]/a[1]
<a href="https://cnib-accesslabs.ca/inclusive-digital-design-testing/lived-user-accessibility-testing/">Lived Experience Accessibility Testing</a>
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space
Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.
Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.
Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns
Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents
Touchpoint Links Liens
Impact Medium Moyen
WCAG , WCAG ,
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 2 WCAG 2
WCAG 2 WCAG 2
WCAG 3 WCAG 3
Location
//ul[@id="menu-main-menu-1"]/li[2]/ul[1]/li[3]/a[1]
<a href="https://cnib-accesslabs.ca/inclusive-digital-design-testing/digital-services/">Digital Services</a>
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space
Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.
Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.
Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns
Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents
Touchpoint Links Liens
Impact Medium Moyen
WCAG , WCAG ,
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 2 WCAG 2
WCAG 2 WCAG 2
WCAG 3 WCAG 3
Location
//ul[@id="menu-main-menu-1"]/li[2]/ul[1]/li[4]/a[1]
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/digital-design-testing/">Digital Design & Testing</a>
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space
Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.
Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.
Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns
Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents
Touchpoint Links Liens
Impact Medium Moyen
WCAG , WCAG ,
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 2 WCAG 2
WCAG 2 WCAG 2
WCAG 3 WCAG 3
Location
//ul[@id="menu-main-menu-1"]/li[3]/a[1]
<a href="https://cnib-accesslabs.ca/about-us/">About Us</a>
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space
Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.
Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.
Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns
Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents
Touchpoint Links Liens
Impact Medium Moyen
WCAG , WCAG ,
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 2 WCAG 2
WCAG 2 WCAG 2
WCAG 3 WCAG 3
Location
//ul[@id="menu-main-menu-1"]/li[4]/a[1]
<a href="https://cnib-accesslabs.ca/become-a-tester/">Become a Tester</a>
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space
Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.
Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.
Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns
Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents
Touchpoint Links Liens
Impact Medium Moyen
WCAG , WCAG ,
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 2 WCAG 2
WCAG 2 WCAG 2
WCAG 3 WCAG 3
Location
//ul[@id="menu-main-menu-1"]/li[5]/a[1]
<a href="https://cnib-accesslabs.ca/inclusive-cx-2/">Inclusive CX</a>
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space
Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.
Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.
Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns
Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents
Touchpoint Links Liens
Impact Medium Moyen
WCAG , WCAG ,
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 2 WCAG 2
WCAG 2 WCAG 2
WCAG 3 WCAG 3
Location
//ul[@id="menu-main-menu-1"]/li[6]/a[1]
<a href="https://cnib-accesslabs.ca/news/">News</a>
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space
Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.
Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.
Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns
Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents
Touchpoint Links Liens
Impact Medium Moyen
WCAG , WCAG ,
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 2 WCAG 2
WCAG 2 WCAG 2
WCAG 3 WCAG 3
Location
//ul[@id="menu-main-menu-1"]/li[7]/a[1]
<a href="https://cnib-accesslabs.ca/contact-us/" aria-current="page">Contact Us</a>
Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space
Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.
Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.
Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns
Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents
Touchpoint Links Liens
Impact Medium Moyen
WCAG , WCAG ,
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 2 WCAG 2
WCAG 2 WCAG 2
WCAG 3 WCAG 3
Location
//body/footer[1]/div[1]/div[1]/div[3]/div[1]/div[1]/a[1]
<a class="wp-block-button__link wp-element-button" href="https://cnib-accesslabs.ca/subscribe/">Subscribe</a>
Link containing an image (logo, icon, thumbnail, or img element) has no visible focus indicator when keyboard focused, often due to outline:none or outline:0 removing the default focus styling
Lien contenant une image (logo, icône, miniature, ou élément img) n'a pas d'indicateur de focus visible lorsqu'il a le focus clavier, souvent dû à outline:none ou outline:0 supprimant le style de focus par défaut
Image links are common for logos, social media icons, product thumbnails, gallery images, and icon-based navigation. Without visible focus indicators, keyboard users cannot tell when these image links have focus, making it impossible to know what will activate when pressing Enter. This is particularly problematic for image-heavy interfaces like galleries, product listings, and icon navigation where image links may be the primary or only way to access content. Users may accidentally activate the wrong image link because they couldn't see which one had focus, or may tab past important image links without realizing they were there. The problem is compounded when image links are small (like social media icons) - without clear focus indication, users with low vision or attention difficulties cannot locate the focused element. Image links in navigation are especially critical - if users cannot see focus indicators on logo or menu icons, primary site navigation becomes inaccessible.
Les liens images sont courants pour les logos, icônes de réseaux sociaux, miniatures de produits, images de galerie, et navigation basée sur des icônes. Sans indicateurs de focus visibles, les utilisateurs de clavier ne peuvent pas savoir quand ces liens images ont le focus, rendant impossible de savoir ce qui s'activera en appuyant sur Entrée. Ceci est particulièrement problématique pour les interfaces riches en images comme les galeries, listes de produits, et navigation par icônes où les liens images peuvent être le moyen principal ou unique d'accéder au contenu. Les utilisateurs peuvent accidentellement activer le mauvais lien image parce qu'ils ne pouvaient pas voir lequel avait le focus, ou peuvent passer à côté d'importants liens images sans réaliser qu'ils étaient là. Le problème est aggravé quand les liens images sont petits (comme les icônes de réseaux sociaux) - sans indication claire du focus, les utilisateurs malvoyants ou ayant des difficultés d'attention ne peuvent pas localiser l'élément focalisé. Les liens images dans la navigation sont particulièrement critiques - si les utilisateurs ne peuvent pas voir les indicateurs de focus sur les logos ou icônes de menu, la navigation principale du site devient inaccessible.
Keyboard users who cannot see which image link has focus, users with low vision who need clear focus indicators to locate interactive images, users with attention or cognitive difficulties who cannot track invisible focus, users of screen magnification who zoom in and need focus indicators to find their position, users with motor disabilities who carefully target specific image links and need confirmation of focus, users navigating icon-heavy interfaces where image links are the primary interaction method, and mobile keyboard users on tablets where image links are common
Utilisateurs de clavier qui ne peuvent pas voir quel lien image a le focus, utilisateurs malvoyants qui ont besoin d'indicateurs de focus clairs pour localiser les images interactives, utilisateurs avec des difficultés d'attention ou cognitives qui ne peuvent pas suivre un focus invisible, utilisateurs d'agrandissement d'écran qui zooment et ont besoin d'indicateurs de focus pour trouver leur position, utilisateurs avec des handicaps moteurs qui ciblent soigneusement des liens images spécifiques et ont besoin d'une confirmation du focus, utilisateurs naviguant dans des interfaces riches en icônes où les liens images sont la méthode d'interaction principale, et utilisateurs de clavier mobile sur tablettes où les liens images sont courants
Touchpoint Links Liens
Impact High Élevé
WCAG , WCAG ,
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 2 WCAG 2
WCAG 4 WCAG 4
WCAG 4 WCAG 4
Location
//body/header[1]/div[1]/div[1]/div[1]/a[1]
<a href="https://cnib-accesslabs.ca/" class="custom-logo-link" rel="home"><img width="2620" height="1499" src="https://i0.wp.com/cnib-accesslabs.ca/wp-content/uploads/2023/08/23-0008-CNIB_FA_NEW-NAMES
Link opens in new window/tab without warning users
Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs
Unexpectedly opening new windows can disorient users, especially those using screen readers or magnification. Users may not realize a new window opened and become confused when the back button doesn't work. This is particularly problematic for users with cognitive disabilities or those unfamiliar with browser behaviors.
L'ouverture inattendue de nouvelles fenêtres peut désorienter les utilisateurs, en particulier ceux utilisant des lecteurs d'écran ou un grossissement. Les utilisateurs peuvent ne pas réaliser qu'une nouvelle fenêtre s'est ouverte et être confus lorsque le bouton retour ne fonctionne pas. Ceci est particulièrement problématique pour les utilisateurs avec des handicaps cognitifs ou ceux peu familiers avec les comportements des navigateurs.
Screen reader users who may not notice the context change, users with cognitive disabilities who may become disoriented, users with motor disabilities who have difficulty managing multiple windows, and novice computer users
Utilisateurs de lecteurs d'écran qui peuvent ne pas remarquer le changement de contexte, utilisateurs avec des handicaps cognitifs qui peuvent être désorientés, utilisateurs avec des handicaps moteurs qui ont des difficultés à gérer plusieurs fenêtres, et utilisateurs novices en informatique
Touchpoint Links Liens
Impact Medium Moyen
WCAG . WCAG .
WCAG . WCAG .
WCAG 2 WCAG 2
WCAG 2 WCAG 2
Location
//body/header[1]/nav[1]/div[2]/div[1]/ul[1]/li[1]/a[1]
<a rel="noopener nofollow" target="_blank" href="https://www.facebook.com/myCNIB/" class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w
Link opens in new window/tab without warning users
Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs
Unexpectedly opening new windows can disorient users, especially those using screen readers or magnification. Users may not realize a new window opened and become confused when the back button doesn't work. This is particularly problematic for users with cognitive disabilities or those unfamiliar with browser behaviors.
L'ouverture inattendue de nouvelles fenêtres peut désorienter les utilisateurs, en particulier ceux utilisant des lecteurs d'écran ou un grossissement. Les utilisateurs peuvent ne pas réaliser qu'une nouvelle fenêtre s'est ouverte et être confus lorsque le bouton retour ne fonctionne pas. Ceci est particulièrement problématique pour les utilisateurs avec des handicaps cognitifs ou ceux peu familiers avec les comportements des navigateurs.
Screen reader users who may not notice the context change, users with cognitive disabilities who may become disoriented, users with motor disabilities who have difficulty managing multiple windows, and novice computer users
Utilisateurs de lecteurs d'écran qui peuvent ne pas remarquer le changement de contexte, utilisateurs avec des handicaps cognitifs qui peuvent être désorientés, utilisateurs avec des handicaps moteurs qui ont des difficultés à gérer plusieurs fenêtres, et utilisateurs novices en informatique
Touchpoint Links Liens
Impact Medium Moyen
WCAG . WCAG .
WCAG . WCAG .
WCAG 2 WCAG 2
WCAG 2 WCAG 2
Location
//body/header[1]/nav[1]/div[2]/div[1]/ul[1]/li[2]/a[1]
<a rel="noopener nofollow" target="_blank" href="https://twitter.com/CNIB" class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/20
Link opens in new window/tab without warning users
Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs
Unexpectedly opening new windows can disorient users, especially those using screen readers or magnification. Users may not realize a new window opened and become confused when the back button doesn't work. This is particularly problematic for users with cognitive disabilities or those unfamiliar with browser behaviors.
L'ouverture inattendue de nouvelles fenêtres peut désorienter les utilisateurs, en particulier ceux utilisant des lecteurs d'écran ou un grossissement. Les utilisateurs peuvent ne pas réaliser qu'une nouvelle fenêtre s'est ouverte et être confus lorsque le bouton retour ne fonctionne pas. Ceci est particulièrement problématique pour les utilisateurs avec des handicaps cognitifs ou ceux peu familiers avec les comportements des navigateurs.
Screen reader users who may not notice the context change, users with cognitive disabilities who may become disoriented, users with motor disabilities who have difficulty managing multiple windows, and novice computer users
Utilisateurs de lecteurs d'écran qui peuvent ne pas remarquer le changement de contexte, utilisateurs avec des handicaps cognitifs qui peuvent être désorientés, utilisateurs avec des handicaps moteurs qui ont des difficultés à gérer plusieurs fenêtres, et utilisateurs novices en informatique
Touchpoint Links Liens
Impact Medium Moyen
WCAG . WCAG .
WCAG . WCAG .
WCAG 2 WCAG 2
WCAG 2 WCAG 2
Location
//body/header[1]/nav[1]/div[2]/div[1]/ul[1]/li[3]/a[1]
<a rel="noopener nofollow" target="_blank" href="https://www.youtube.com/user/cnibnatcomm" class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http
Link opens in new window/tab without warning users
Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs
Unexpectedly opening new windows can disorient users, especially those using screen readers or magnification. Users may not realize a new window opened and become confused when the back button doesn't work. This is particularly problematic for users with cognitive disabilities or those unfamiliar with browser behaviors.
L'ouverture inattendue de nouvelles fenêtres peut désorienter les utilisateurs, en particulier ceux utilisant des lecteurs d'écran ou un grossissement. Les utilisateurs peuvent ne pas réaliser qu'une nouvelle fenêtre s'est ouverte et être confus lorsque le bouton retour ne fonctionne pas. Ceci est particulièrement problématique pour les utilisateurs avec des handicaps cognitifs ou ceux peu familiers avec les comportements des navigateurs.
Screen reader users who may not notice the context change, users with cognitive disabilities who may become disoriented, users with motor disabilities who have difficulty managing multiple windows, and novice computer users
Utilisateurs de lecteurs d'écran qui peuvent ne pas remarquer le changement de contexte, utilisateurs avec des handicaps cognitifs qui peuvent être désorientés, utilisateurs avec des handicaps moteurs qui ont des difficultés à gérer plusieurs fenêtres, et utilisateurs novices en informatique
Touchpoint Links Liens
Impact Medium Moyen
WCAG . WCAG .
WCAG . WCAG .
WCAG 2 WCAG 2
WCAG 2 WCAG 2
Location
//body/header[1]/nav[1]/div[2]/div[1]/ul[1]/li[4]/a[1]
<a rel="noopener nofollow" target="_blank" href="https://www.instagram.com/cnibfoundation/?hl=en" class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmln
Link opens in new window/tab without warning users
Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs
Unexpectedly opening new windows can disorient users, especially those using screen readers or magnification. Users may not realize a new window opened and become confused when the back button doesn't work. This is particularly problematic for users with cognitive disabilities or those unfamiliar with browser behaviors.
L'ouverture inattendue de nouvelles fenêtres peut désorienter les utilisateurs, en particulier ceux utilisant des lecteurs d'écran ou un grossissement. Les utilisateurs peuvent ne pas réaliser qu'une nouvelle fenêtre s'est ouverte et être confus lorsque le bouton retour ne fonctionne pas. Ceci est particulièrement problématique pour les utilisateurs avec des handicaps cognitifs ou ceux peu familiers avec les comportements des navigateurs.
Screen reader users who may not notice the context change, users with cognitive disabilities who may become disoriented, users with motor disabilities who have difficulty managing multiple windows, and novice computer users
Utilisateurs de lecteurs d'écran qui peuvent ne pas remarquer le changement de contexte, utilisateurs avec des handicaps cognitifs qui peuvent être désorientés, utilisateurs avec des handicaps moteurs qui ont des difficultés à gérer plusieurs fenêtres, et utilisateurs novices en informatique
Touchpoint Links Liens
Impact Medium Moyen
WCAG . WCAG .
WCAG . WCAG .
WCAG 2 WCAG 2
WCAG 2 WCAG 2
Location
//body/header[1]/nav[1]/div[2]/div[1]/ul[1]/li[5]/a[1]
<a rel="noopener nofollow" target="_blank" href="https://www.linkedin.com/company/cnib/" class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http:/
Link opens in new window/tab without warning users
Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs
Unexpectedly opening new windows can disorient users, especially those using screen readers or magnification. Users may not realize a new window opened and become confused when the back button doesn't work. This is particularly problematic for users with cognitive disabilities or those unfamiliar with browser behaviors.
L'ouverture inattendue de nouvelles fenêtres peut désorienter les utilisateurs, en particulier ceux utilisant des lecteurs d'écran ou un grossissement. Les utilisateurs peuvent ne pas réaliser qu'une nouvelle fenêtre s'est ouverte et être confus lorsque le bouton retour ne fonctionne pas. Ceci est particulièrement problématique pour les utilisateurs avec des handicaps cognitifs ou ceux peu familiers avec les comportements des navigateurs.
Screen reader users who may not notice the context change, users with cognitive disabilities who may become disoriented, users with motor disabilities who have difficulty managing multiple windows, and novice computer users
Utilisateurs de lecteurs d'écran qui peuvent ne pas remarquer le changement de contexte, utilisateurs avec des handicaps cognitifs qui peuvent être désorientés, utilisateurs avec des handicaps moteurs qui ont des difficultés à gérer plusieurs fenêtres, et utilisateurs novices en informatique
Touchpoint Links Liens
Impact Medium Moyen
WCAG . WCAG .
WCAG . WCAG .
WCAG 2 WCAG 2
WCAG 2 WCAG 2
Location
//body/header[1]/nav[1]/div[4]/div[1]/ul[1]/li[1]/a[1]
<a rel="noopener nofollow" target="_blank" href="https://www.facebook.com/myCNIB/" class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w
Link opens in new window/tab without warning users
Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs
Unexpectedly opening new windows can disorient users, especially those using screen readers or magnification. Users may not realize a new window opened and become confused when the back button doesn't work. This is particularly problematic for users with cognitive disabilities or those unfamiliar with browser behaviors.
L'ouverture inattendue de nouvelles fenêtres peut désorienter les utilisateurs, en particulier ceux utilisant des lecteurs d'écran ou un grossissement. Les utilisateurs peuvent ne pas réaliser qu'une nouvelle fenêtre s'est ouverte et être confus lorsque le bouton retour ne fonctionne pas. Ceci est particulièrement problématique pour les utilisateurs avec des handicaps cognitifs ou ceux peu familiers avec les comportements des navigateurs.
Screen reader users who may not notice the context change, users with cognitive disabilities who may become disoriented, users with motor disabilities who have difficulty managing multiple windows, and novice computer users
Utilisateurs de lecteurs d'écran qui peuvent ne pas remarquer le changement de contexte, utilisateurs avec des handicaps cognitifs qui peuvent être désorientés, utilisateurs avec des handicaps moteurs qui ont des difficultés à gérer plusieurs fenêtres, et utilisateurs novices en informatique
Touchpoint Links Liens
Impact Medium Moyen
WCAG . WCAG .
WCAG . WCAG .
WCAG 2 WCAG 2
WCAG 2 WCAG 2
Location
//body/header[1]/nav[1]/div[4]/div[1]/ul[1]/li[2]/a[1]
<a rel="noopener nofollow" target="_blank" href="https://twitter.com/CNIB" class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/20
Link opens in new window/tab without warning users
Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs
Unexpectedly opening new windows can disorient users, especially those using screen readers or magnification. Users may not realize a new window opened and become confused when the back button doesn't work. This is particularly problematic for users with cognitive disabilities or those unfamiliar with browser behaviors.
L'ouverture inattendue de nouvelles fenêtres peut désorienter les utilisateurs, en particulier ceux utilisant des lecteurs d'écran ou un grossissement. Les utilisateurs peuvent ne pas réaliser qu'une nouvelle fenêtre s'est ouverte et être confus lorsque le bouton retour ne fonctionne pas. Ceci est particulièrement problématique pour les utilisateurs avec des handicaps cognitifs ou ceux peu familiers avec les comportements des navigateurs.
Screen reader users who may not notice the context change, users with cognitive disabilities who may become disoriented, users with motor disabilities who have difficulty managing multiple windows, and novice computer users
Utilisateurs de lecteurs d'écran qui peuvent ne pas remarquer le changement de contexte, utilisateurs avec des handicaps cognitifs qui peuvent être désorientés, utilisateurs avec des handicaps moteurs qui ont des difficultés à gérer plusieurs fenêtres, et utilisateurs novices en informatique
Touchpoint Links Liens
Impact Medium Moyen
WCAG . WCAG .
WCAG . WCAG .
WCAG 2 WCAG 2
WCAG 2 WCAG 2
Location
//body/header[1]/nav[1]/div[4]/div[1]/ul[1]/li[3]/a[1]
<a rel="noopener nofollow" target="_blank" href="https://www.youtube.com/user/cnibnatcomm" class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http
Link opens in new window/tab without warning users
Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs
Unexpectedly opening new windows can disorient users, especially those using screen readers or magnification. Users may not realize a new window opened and become confused when the back button doesn't work. This is particularly problematic for users with cognitive disabilities or those unfamiliar with browser behaviors.
L'ouverture inattendue de nouvelles fenêtres peut désorienter les utilisateurs, en particulier ceux utilisant des lecteurs d'écran ou un grossissement. Les utilisateurs peuvent ne pas réaliser qu'une nouvelle fenêtre s'est ouverte et être confus lorsque le bouton retour ne fonctionne pas. Ceci est particulièrement problématique pour les utilisateurs avec des handicaps cognitifs ou ceux peu familiers avec les comportements des navigateurs.
Screen reader users who may not notice the context change, users with cognitive disabilities who may become disoriented, users with motor disabilities who have difficulty managing multiple windows, and novice computer users
Utilisateurs de lecteurs d'écran qui peuvent ne pas remarquer le changement de contexte, utilisateurs avec des handicaps cognitifs qui peuvent être désorientés, utilisateurs avec des handicaps moteurs qui ont des difficultés à gérer plusieurs fenêtres, et utilisateurs novices en informatique
Touchpoint Links Liens
Impact Medium Moyen
WCAG . WCAG .
WCAG . WCAG .
WCAG 2 WCAG 2
WCAG 2 WCAG 2
Location
//body/header[1]/nav[1]/div[4]/div[1]/ul[1]/li[4]/a[1]
<a rel="noopener nofollow" target="_blank" href="https://www.instagram.com/cnibfoundation/?hl=en" class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmln
Link opens in new window/tab without warning users
Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs
Unexpectedly opening new windows can disorient users, especially those using screen readers or magnification. Users may not realize a new window opened and become confused when the back button doesn't work. This is particularly problematic for users with cognitive disabilities or those unfamiliar with browser behaviors.
L'ouverture inattendue de nouvelles fenêtres peut désorienter les utilisateurs, en particulier ceux utilisant des lecteurs d'écran ou un grossissement. Les utilisateurs peuvent ne pas réaliser qu'une nouvelle fenêtre s'est ouverte et être confus lorsque le bouton retour ne fonctionne pas. Ceci est particulièrement problématique pour les utilisateurs avec des handicaps cognitifs ou ceux peu familiers avec les comportements des navigateurs.
Screen reader users who may not notice the context change, users with cognitive disabilities who may become disoriented, users with motor disabilities who have difficulty managing multiple windows, and novice computer users
Utilisateurs de lecteurs d'écran qui peuvent ne pas remarquer le changement de contexte, utilisateurs avec des handicaps cognitifs qui peuvent être désorientés, utilisateurs avec des handicaps moteurs qui ont des difficultés à gérer plusieurs fenêtres, et utilisateurs novices en informatique
Touchpoint Links Liens
Impact Medium Moyen
WCAG . WCAG .
WCAG . WCAG .
WCAG 2 WCAG 2
WCAG 2 WCAG 2
Location
//body/header[1]/nav[1]/div[4]/div[1]/ul[1]/li[5]/a[1]
<a rel="noopener nofollow" target="_blank" href="https://www.linkedin.com/company/cnib/" class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http:/
Link opens in new window/tab without warning users
Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs
Unexpectedly opening new windows can disorient users, especially those using screen readers or magnification. Users may not realize a new window opened and become confused when the back button doesn't work. This is particularly problematic for users with cognitive disabilities or those unfamiliar with browser behaviors.
L'ouverture inattendue de nouvelles fenêtres peut désorienter les utilisateurs, en particulier ceux utilisant des lecteurs d'écran ou un grossissement. Les utilisateurs peuvent ne pas réaliser qu'une nouvelle fenêtre s'est ouverte et être confus lorsque le bouton retour ne fonctionne pas. Ceci est particulièrement problématique pour les utilisateurs avec des handicaps cognitifs ou ceux peu familiers avec les comportements des navigateurs.
Screen reader users who may not notice the context change, users with cognitive disabilities who may become disoriented, users with motor disabilities who have difficulty managing multiple windows, and novice computer users
Utilisateurs de lecteurs d'écran qui peuvent ne pas remarquer le changement de contexte, utilisateurs avec des handicaps cognitifs qui peuvent être désorientés, utilisateurs avec des handicaps moteurs qui ont des difficultés à gérer plusieurs fenêtres, et utilisateurs novices en informatique
Touchpoint Links Liens
Impact Medium Moyen
WCAG . WCAG .
WCAG . WCAG .
WCAG 2 WCAG 2
WCAG 2 WCAG 2
Location
//body/footer[1]/div[2]/div[1]/div[1]/div[1]/div[5]/ul[1]/li[1]/a[1]
<a rel="noopener nofollow" target="_blank" href="https://www.facebook.com/myCNIB/" class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w
Link opens in new window/tab without warning users
Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs
Unexpectedly opening new windows can disorient users, especially those using screen readers or magnification. Users may not realize a new window opened and become confused when the back button doesn't work. This is particularly problematic for users with cognitive disabilities or those unfamiliar with browser behaviors.
L'ouverture inattendue de nouvelles fenêtres peut désorienter les utilisateurs, en particulier ceux utilisant des lecteurs d'écran ou un grossissement. Les utilisateurs peuvent ne pas réaliser qu'une nouvelle fenêtre s'est ouverte et être confus lorsque le bouton retour ne fonctionne pas. Ceci est particulièrement problématique pour les utilisateurs avec des handicaps cognitifs ou ceux peu familiers avec les comportements des navigateurs.
Screen reader users who may not notice the context change, users with cognitive disabilities who may become disoriented, users with motor disabilities who have difficulty managing multiple windows, and novice computer users
Utilisateurs de lecteurs d'écran qui peuvent ne pas remarquer le changement de contexte, utilisateurs avec des handicaps cognitifs qui peuvent être désorientés, utilisateurs avec des handicaps moteurs qui ont des difficultés à gérer plusieurs fenêtres, et utilisateurs novices en informatique
Touchpoint Links Liens
Impact Medium Moyen
WCAG . WCAG .
WCAG . WCAG .
WCAG 2 WCAG 2
WCAG 2 WCAG 2
Location
//body/footer[1]/div[2]/div[1]/div[1]/div[1]/div[5]/ul[1]/li[2]/a[1]
<a rel="noopener nofollow" target="_blank" href="https://twitter.com/CNIB" class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/20
Link opens in new window/tab without warning users
Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs
Unexpectedly opening new windows can disorient users, especially those using screen readers or magnification. Users may not realize a new window opened and become confused when the back button doesn't work. This is particularly problematic for users with cognitive disabilities or those unfamiliar with browser behaviors.
L'ouverture inattendue de nouvelles fenêtres peut désorienter les utilisateurs, en particulier ceux utilisant des lecteurs d'écran ou un grossissement. Les utilisateurs peuvent ne pas réaliser qu'une nouvelle fenêtre s'est ouverte et être confus lorsque le bouton retour ne fonctionne pas. Ceci est particulièrement problématique pour les utilisateurs avec des handicaps cognitifs ou ceux peu familiers avec les comportements des navigateurs.
Screen reader users who may not notice the context change, users with cognitive disabilities who may become disoriented, users with motor disabilities who have difficulty managing multiple windows, and novice computer users
Utilisateurs de lecteurs d'écran qui peuvent ne pas remarquer le changement de contexte, utilisateurs avec des handicaps cognitifs qui peuvent être désorientés, utilisateurs avec des handicaps moteurs qui ont des difficultés à gérer plusieurs fenêtres, et utilisateurs novices en informatique
Touchpoint Links Liens
Impact Medium Moyen
WCAG . WCAG .
WCAG . WCAG .
WCAG 2 WCAG 2
WCAG 2 WCAG 2
Location
//body/footer[1]/div[2]/div[1]/div[1]/div[1]/div[5]/ul[1]/li[3]/a[1]
<a rel="noopener nofollow" target="_blank" href="https://www.youtube.com/user/cnibnatcomm" class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http
Link opens in new window/tab without warning users
Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs
Unexpectedly opening new windows can disorient users, especially those using screen readers or magnification. Users may not realize a new window opened and become confused when the back button doesn't work. This is particularly problematic for users with cognitive disabilities or those unfamiliar with browser behaviors.
L'ouverture inattendue de nouvelles fenêtres peut désorienter les utilisateurs, en particulier ceux utilisant des lecteurs d'écran ou un grossissement. Les utilisateurs peuvent ne pas réaliser qu'une nouvelle fenêtre s'est ouverte et être confus lorsque le bouton retour ne fonctionne pas. Ceci est particulièrement problématique pour les utilisateurs avec des handicaps cognitifs ou ceux peu familiers avec les comportements des navigateurs.
Screen reader users who may not notice the context change, users with cognitive disabilities who may become disoriented, users with motor disabilities who have difficulty managing multiple windows, and novice computer users
Utilisateurs de lecteurs d'écran qui peuvent ne pas remarquer le changement de contexte, utilisateurs avec des handicaps cognitifs qui peuvent être désorientés, utilisateurs avec des handicaps moteurs qui ont des difficultés à gérer plusieurs fenêtres, et utilisateurs novices en informatique
Touchpoint Links Liens
Impact Medium Moyen
WCAG . WCAG .
WCAG . WCAG .
WCAG 2 WCAG 2
WCAG 2 WCAG 2
Location
//body/footer[1]/div[2]/div[1]/div[1]/div[1]/div[5]/ul[1]/li[4]/a[1]
<a rel="noopener nofollow" target="_blank" href="https://www.instagram.com/cnibfoundation/?hl=en" class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmln
Link opens in new window/tab without warning users
Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs
Unexpectedly opening new windows can disorient users, especially those using screen readers or magnification. Users may not realize a new window opened and become confused when the back button doesn't work. This is particularly problematic for users with cognitive disabilities or those unfamiliar with browser behaviors.
L'ouverture inattendue de nouvelles fenêtres peut désorienter les utilisateurs, en particulier ceux utilisant des lecteurs d'écran ou un grossissement. Les utilisateurs peuvent ne pas réaliser qu'une nouvelle fenêtre s'est ouverte et être confus lorsque le bouton retour ne fonctionne pas. Ceci est particulièrement problématique pour les utilisateurs avec des handicaps cognitifs ou ceux peu familiers avec les comportements des navigateurs.
Screen reader users who may not notice the context change, users with cognitive disabilities who may become disoriented, users with motor disabilities who have difficulty managing multiple windows, and novice computer users
Utilisateurs de lecteurs d'écran qui peuvent ne pas remarquer le changement de contexte, utilisateurs avec des handicaps cognitifs qui peuvent être désorientés, utilisateurs avec des handicaps moteurs qui ont des difficultés à gérer plusieurs fenêtres, et utilisateurs novices en informatique
Touchpoint Links Liens
Impact Medium Moyen
WCAG . WCAG .
WCAG . WCAG .
WCAG 2 WCAG 2
WCAG 2 WCAG 2
Location
//body/footer[1]/div[2]/div[1]/div[1]/div[1]/div[5]/ul[1]/li[5]/a[1]
<a rel="noopener nofollow" target="_blank" href="https://www.linkedin.com/company/cnib/" class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http:/
List element (ul, ol, dl) contains no list items
L'élément de liste (ul, ol, dl) ne contient aucun élément de liste
Empty lists create confusion about document structure and may indicate missing content or markup errors.
Les listes vides créent de la confusion sur la structure du document et peuvent indiquer du contenu manquant ou des erreurs de balisage.
Screen reader users who encounter empty list announcements, all users missing potentially important content.
Utilisateurs de lecteurs d'écran qui rencontrent des annonces de listes vides, tous les utilisateurs manquant du contenu potentiellement important.
Touchpoint Lists Listes
Impact Medium Moyen
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
Location
/html[1]/body[1]/main[1]/div[2]/div[1]/div[5]/div[1]/ul[1]
<ul></ul>
List item (<li> or role="listitem") is empty or contains only whitespace
L'élément de liste (<li> ou role="listitem") est vide ou ne contient que des espaces
Empty list items create confusion for screen reader users who hear "bullet" or "list item" announced but receive no content. Users don't know if content failed to load or if the empty item is intentional.
Les éléments de liste vides créent de la confusion pour les utilisateurs de lecteurs d'écran qui entendent "puce" ou "élément de liste" annoncé mais ne reçoivent aucun contenu. Les utilisateurs ne savent pas si le contenu a échoué à se charger ou si l'élément vide est intentionnel.
Screen reader users who hear meaningless list item announcements, keyboard users who may encounter empty items, users with cognitive disabilities confused by structural elements with no purpose
Utilisateurs de lecteurs d'écran qui entendent des annonces d'éléments de liste dénuées de sens, utilisateurs de clavier qui peuvent rencontrer des éléments vides, utilisateurs avec des handicaps cognitifs confus par des éléments structurels sans objectif
Touchpoint Lists Listes
Impact Medium Moyen
WCAG , WCAG ,
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 2 WCAG 2
WCAG 3 WCAG 3
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[10]/ul[1]/li[1]
<li><img decoding="async" class="wp-image-4858" style="float:left;margin:0;" width="25%" src="https://cnib-accesslabs.ca/wp-content/uploads/2023/09/CNIB-Logo-White.png" alt="CNIB Foundation" srcset="h
List item (<li> or role="listitem") is empty or contains only whitespace
L'élément de liste (<li> ou role="listitem") est vide ou ne contient que des espaces
Empty list items create confusion for screen reader users who hear "bullet" or "list item" announced but receive no content. Users don't know if content failed to load or if the empty item is intentional.
Les éléments de liste vides créent de la confusion pour les utilisateurs de lecteurs d'écran qui entendent "puce" ou "élément de liste" annoncé mais ne reçoivent aucun contenu. Les utilisateurs ne savent pas si le contenu a échoué à se charger ou si l'élément vide est intentionnel.
Screen reader users who hear meaningless list item announcements, keyboard users who may encounter empty items, users with cognitive disabilities confused by structural elements with no purpose
Utilisateurs de lecteurs d'écran qui entendent des annonces d'éléments de liste dénuées de sens, utilisateurs de clavier qui peuvent rencontrer des éléments vides, utilisateurs avec des handicaps cognitifs confus par des éléments structurels sans objectif
Touchpoint Lists Listes
Impact Medium Moyen
WCAG , WCAG ,
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 2 WCAG 2
WCAG 3 WCAG 3
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[10]/ul[1]/li[2]
<li><img decoding="async" class="wp-image-4866" style="float:left;margin:0;" width="25%" src="https://cnib-accesslabs.ca/wp-content/uploads/2023/09/VLR_Canada_EN_withTM.png" alt="Vision Loss Rehabilit
List item (<li> or role="listitem") is empty or contains only whitespace
L'élément de liste (<li> ou role="listitem") est vide ou ne contient que des espaces
Empty list items create confusion for screen reader users who hear "bullet" or "list item" announced but receive no content. Users don't know if content failed to load or if the empty item is intentional.
Les éléments de liste vides créent de la confusion pour les utilisateurs de lecteurs d'écran qui entendent "puce" ou "élément de liste" annoncé mais ne reçoivent aucun contenu. Les utilisateurs ne savent pas si le contenu a échoué à se charger ou si l'élément vide est intentionnel.
Screen reader users who hear meaningless list item announcements, keyboard users who may encounter empty items, users with cognitive disabilities confused by structural elements with no purpose
Utilisateurs de lecteurs d'écran qui entendent des annonces d'éléments de liste dénuées de sens, utilisateurs de clavier qui peuvent rencontrer des éléments vides, utilisateurs avec des handicaps cognitifs confus par des éléments structurels sans objectif
Touchpoint Lists Listes
Impact Medium Moyen
WCAG , WCAG ,
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 2 WCAG 2
WCAG 3 WCAG 3
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[10]/ul[1]/li[3]
<li><img decoding="async" class="wp-image-4860" style="float:left;margin:0;" width="25%" src="https://cnib-accesslabs.ca/wp-content/uploads/2023/09/CNIB_Deafblind_ENG.png" alt="Deafblind Community Ser
List item (<li> or role="listitem") is empty or contains only whitespace
L'élément de liste (<li> ou role="listitem") est vide ou ne contient que des espaces
Empty list items create confusion for screen reader users who hear "bullet" or "list item" announced but receive no content. Users don't know if content failed to load or if the empty item is intentional.
Les éléments de liste vides créent de la confusion pour les utilisateurs de lecteurs d'écran qui entendent "puce" ou "élément de liste" annoncé mais ne reçoivent aucun contenu. Les utilisateurs ne savent pas si le contenu a échoué à se charger ou si l'élément vide est intentionnel.
Screen reader users who hear meaningless list item announcements, keyboard users who may encounter empty items, users with cognitive disabilities confused by structural elements with no purpose
Utilisateurs de lecteurs d'écran qui entendent des annonces d'éléments de liste dénuées de sens, utilisateurs de clavier qui peuvent rencontrer des éléments vides, utilisateurs avec des handicaps cognitifs confus par des éléments structurels sans objectif
Touchpoint Lists Listes
Impact Medium Moyen
WCAG , WCAG ,
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 2 WCAG 2
WCAG 3 WCAG 3
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[10]/ul[1]/li[4]
<li><img decoding="async" class="wp-image-4854" style="float:left;margin:0;" width="25%" src="https://cnib-accesslabs.ca/wp-content/uploads/2023/09/CNIB-Foundation_Guide-Dogs_Logo_White_ENG.png" alt="
List item (<li> or role="listitem") is empty or contains only whitespace
L'élément de liste (<li> ou role="listitem") est vide ou ne contient que des espaces
Empty list items create confusion for screen reader users who hear "bullet" or "list item" announced but receive no content. Users don't know if content failed to load or if the empty item is intentional.
Les éléments de liste vides créent de la confusion pour les utilisateurs de lecteurs d'écran qui entendent "puce" ou "élément de liste" annoncé mais ne reçoivent aucun contenu. Les utilisateurs ne savent pas si le contenu a échoué à se charger ou si l'élément vide est intentionnel.
Screen reader users who hear meaningless list item announcements, keyboard users who may encounter empty items, users with cognitive disabilities confused by structural elements with no purpose
Utilisateurs de lecteurs d'écran qui entendent des annonces d'éléments de liste dénuées de sens, utilisateurs de clavier qui peuvent rencontrer des éléments vides, utilisateurs avec des handicaps cognitifs confus par des éléments structurels sans objectif
Touchpoint Lists Listes
Impact Medium Moyen
WCAG , WCAG ,
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 2 WCAG 2
WCAG 3 WCAG 3
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[11]/ul[1]/li[1]
<li><img decoding="async" width="25%" class="wp-image-4858" style="float:left;margin:0;" src="https://cnib-accesslabs.ca/wp-content/uploads/2023/09/CNIB_ONLY_Wht_FRE_.png" alt="INCA"></li>
List item (<li> or role="listitem") is empty or contains only whitespace
L'élément de liste (<li> ou role="listitem") est vide ou ne contient que des espaces
Empty list items create confusion for screen reader users who hear "bullet" or "list item" announced but receive no content. Users don't know if content failed to load or if the empty item is intentional.
Les éléments de liste vides créent de la confusion pour les utilisateurs de lecteurs d'écran qui entendent "puce" ou "élément de liste" annoncé mais ne reçoivent aucun contenu. Les utilisateurs ne savent pas si le contenu a échoué à se charger ou si l'élément vide est intentionnel.
Screen reader users who hear meaningless list item announcements, keyboard users who may encounter empty items, users with cognitive disabilities confused by structural elements with no purpose
Utilisateurs de lecteurs d'écran qui entendent des annonces d'éléments de liste dénuées de sens, utilisateurs de clavier qui peuvent rencontrer des éléments vides, utilisateurs avec des handicaps cognitifs confus par des éléments structurels sans objectif
Touchpoint Lists Listes
Impact Medium Moyen
WCAG , WCAG ,
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 2 WCAG 2
WCAG 3 WCAG 3
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[11]/ul[1]/li[2]
<li><img decoding="async" width="25%" class="wp-image-4866" style="float:left;margin:0;" src="https://cnib-accesslabs.ca/wp-content/uploads/2023/09/VLR_Canada_FR_withMC.png" alt="Readaptation En Defic
List item (<li> or role="listitem") is empty or contains only whitespace
L'élément de liste (<li> ou role="listitem") est vide ou ne contient que des espaces
Empty list items create confusion for screen reader users who hear "bullet" or "list item" announced but receive no content. Users don't know if content failed to load or if the empty item is intentional.
Les éléments de liste vides créent de la confusion pour les utilisateurs de lecteurs d'écran qui entendent "puce" ou "élément de liste" annoncé mais ne reçoivent aucun contenu. Les utilisateurs ne savent pas si le contenu a échoué à se charger ou si l'élément vide est intentionnel.
Screen reader users who hear meaningless list item announcements, keyboard users who may encounter empty items, users with cognitive disabilities confused by structural elements with no purpose
Utilisateurs de lecteurs d'écran qui entendent des annonces d'éléments de liste dénuées de sens, utilisateurs de clavier qui peuvent rencontrer des éléments vides, utilisateurs avec des handicaps cognitifs confus par des éléments structurels sans objectif
Touchpoint Lists Listes
Impact Medium Moyen
WCAG , WCAG ,
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 2 WCAG 2
WCAG 3 WCAG 3
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[11]/ul[1]/li[3]
<li><img decoding="async" width="25%" class="wp-image-4860" style="float:left;margin:0;" src="https://cnib-accesslabs.ca/wp-content/uploads/2023/09/CNIB_Deafblind_FR.png" alt="Services Communautaires
List item (<li> or role="listitem") is empty or contains only whitespace
L'élément de liste (<li> ou role="listitem") est vide ou ne contient que des espaces
Empty list items create confusion for screen reader users who hear "bullet" or "list item" announced but receive no content. Users don't know if content failed to load or if the empty item is intentional.
Les éléments de liste vides créent de la confusion pour les utilisateurs de lecteurs d'écran qui entendent "puce" ou "élément de liste" annoncé mais ne reçoivent aucun contenu. Les utilisateurs ne savent pas si le contenu a échoué à se charger ou si l'élément vide est intentionnel.
Screen reader users who hear meaningless list item announcements, keyboard users who may encounter empty items, users with cognitive disabilities confused by structural elements with no purpose
Utilisateurs de lecteurs d'écran qui entendent des annonces d'éléments de liste dénuées de sens, utilisateurs de clavier qui peuvent rencontrer des éléments vides, utilisateurs avec des handicaps cognitifs confus par des éléments structurels sans objectif
Touchpoint Lists Listes
Impact Medium Moyen
WCAG , WCAG ,
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 2 WCAG 2
WCAG 3 WCAG 3
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[11]/ul[1]/li[4]
<li><img decoding="async" width="25%" class="wp-image-4854" style="float:left;margin:0;" src="https://cnib-accesslabs.ca/wp-content/uploads/2023/09/CNIB-Foundation_Guide-Dogs_Logo_White_FRE.png" alt="
Inline style attributes define color or font properties directly on HTML elements, overriding user stylesheets and preventing users from customizing visual presentation
Les attributs de style en ligne définissent des propriétés de couleur ou de police directement sur les éléments HTML, remplaçant les feuilles de style utilisateur et empêchant les utilisateurs de personnaliser la présentation visuelle
When colors and fonts are hard-coded in inline style attributes, CSS specificity rules make them extremely difficult for users to override with their own stylesheets. Users with low vision who need specific color schemes (high contrast, inverted colors, custom color combinations), users with dyslexia who need particular fonts, and users who need custom text spacing cannot apply their accessibility preferences. Inline styles essentially lock visual presentation, forcing all users to view content exactly as designed regardless of their needs.
Quand les couleurs et polices sont codées en dur dans les attributs de style en ligne, les règles de spécificité CSS les rendent extrêmement difficiles à remplacer par les utilisateurs avec leurs propres feuilles de style. Les utilisateurs malvoyants qui ont besoin de schémas de couleurs spécifiques (contraste élevé, couleurs inversées, combinaisons de couleurs personnalisées), les utilisateurs avec dyslexie qui ont besoin de polices particulières, et les utilisateurs qui ont besoin d'espacement de texte personnalisé ne peuvent pas appliquer leurs préférences d'accessibilité. Les styles en ligne verrouillent essentiellement la présentation visuelle, forçant tous les utilisateurs à voir le contenu exactement comme conçu indépendamment de leurs besoins.
Users with low vision who require custom color schemes or high contrast settings, users with dyslexia or reading disabilities who need specific fonts like OpenDyslexic or Comic Sans, users with light sensitivity who need dark mode or specific color combinations, users with cognitive disabilities who need customized text presentation, elderly users who need larger text with specific spacing, and users with color blindness who need adjusted color palettes
Utilisateurs malvoyants qui nécessitent des schémas de couleurs personnalisés ou des paramètres de contraste élevé, utilisateurs avec dyslexie ou troubles de lecture qui ont besoin de polices spécifiques comme OpenDyslexic ou Comic Sans, utilisateurs avec sensibilité à la lumière qui nécessitent un mode sombre ou des combinaisons de couleurs spécifiques, utilisateurs avec handicaps cognitifs qui ont besoin d'une présentation de texte personnalisée, utilisateurs âgés qui nécessitent un texte plus grand avec un espacement spécifique, et utilisateurs daltoniens qui ont besoin de palettes de couleurs ajustées
Touchpoint Styles Styles
Impact High Élevé
WCAG , WCAG ,
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 2 WCAG 2
WCAG 4 WCAG 4
WCAG 4 WCAG 4
WCAG 5 WCAG 5
Location
/html[1]/body[1]/main[1]/div[2]/div[1]/div[3]/div[1]/span[1]/svg[1]/path[1]
<path style="fill:#565D66" d="M953 45.8l-188.4-43.4c-43.2-10-87.2 12.4-104.6 53.2l-87 203c-16 37.2-5.2 81.2 26.2 106.8l80 65.4c-57.2 104.8-143.6 191.2-248.4 248.2l-65.4-80c-25.6-31.4-69.6-42.2-106.8-2...
Inline style attributes define color or font properties directly on HTML elements, overriding user stylesheets and preventing users from customizing visual presentation
Les attributs de style en ligne définissent des propriétés de couleur ou de police directement sur les éléments HTML, remplaçant les feuilles de style utilisateur et empêchant les utilisateurs de personnaliser la présentation visuelle
When colors and fonts are hard-coded in inline style attributes, CSS specificity rules make them extremely difficult for users to override with their own stylesheets. Users with low vision who need specific color schemes (high contrast, inverted colors, custom color combinations), users with dyslexia who need particular fonts, and users who need custom text spacing cannot apply their accessibility preferences. Inline styles essentially lock visual presentation, forcing all users to view content exactly as designed regardless of their needs.
Quand les couleurs et polices sont codées en dur dans les attributs de style en ligne, les règles de spécificité CSS les rendent extrêmement difficiles à remplacer par les utilisateurs avec leurs propres feuilles de style. Les utilisateurs malvoyants qui ont besoin de schémas de couleurs spécifiques (contraste élevé, couleurs inversées, combinaisons de couleurs personnalisées), les utilisateurs avec dyslexie qui ont besoin de polices particulières, et les utilisateurs qui ont besoin d'espacement de texte personnalisé ne peuvent pas appliquer leurs préférences d'accessibilité. Les styles en ligne verrouillent essentiellement la présentation visuelle, forçant tous les utilisateurs à voir le contenu exactement comme conçu indépendamment de leurs besoins.
Users with low vision who require custom color schemes or high contrast settings, users with dyslexia or reading disabilities who need specific fonts like OpenDyslexic or Comic Sans, users with light sensitivity who need dark mode or specific color combinations, users with cognitive disabilities who need customized text presentation, elderly users who need larger text with specific spacing, and users with color blindness who need adjusted color palettes
Utilisateurs malvoyants qui nécessitent des schémas de couleurs personnalisés ou des paramètres de contraste élevé, utilisateurs avec dyslexie ou troubles de lecture qui ont besoin de polices spécifiques comme OpenDyslexic ou Comic Sans, utilisateurs avec sensibilité à la lumière qui nécessitent un mode sombre ou des combinaisons de couleurs spécifiques, utilisateurs avec handicaps cognitifs qui ont besoin d'une présentation de texte personnalisée, utilisateurs âgés qui nécessitent un texte plus grand avec un espacement spécifique, et utilisateurs daltoniens qui ont besoin de palettes de couleurs ajustées
Touchpoint Styles Styles
Impact High Élevé
WCAG , WCAG ,
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 2 WCAG 2
WCAG 4 WCAG 4
WCAG 4 WCAG 4
WCAG 5 WCAG 5
Location
/html[1]/body[1]/main[1]/div[2]/div[1]/div[3]/div[2]/span[1]/svg[1]/path[1]
<path style="fill:#565D66" d="M928 128h-832c-53 0-96 43-96 96v576c0 53 43 96 96 96h832c53 0 96-43 96-96v-576c0-53-43-96-96-96zM96 192h832c17.6 0 32 14.4 32 32v82.8c-43.8 37-106.4 88-301.2 242.6-33.8 2...
Inline style attributes define color or font properties directly on HTML elements, overriding user stylesheets and preventing users from customizing visual presentation
Les attributs de style en ligne définissent des propriétés de couleur ou de police directement sur les éléments HTML, remplaçant les feuilles de style utilisateur et empêchant les utilisateurs de personnaliser la présentation visuelle
When colors and fonts are hard-coded in inline style attributes, CSS specificity rules make them extremely difficult for users to override with their own stylesheets. Users with low vision who need specific color schemes (high contrast, inverted colors, custom color combinations), users with dyslexia who need particular fonts, and users who need custom text spacing cannot apply their accessibility preferences. Inline styles essentially lock visual presentation, forcing all users to view content exactly as designed regardless of their needs.
Quand les couleurs et polices sont codées en dur dans les attributs de style en ligne, les règles de spécificité CSS les rendent extrêmement difficiles à remplacer par les utilisateurs avec leurs propres feuilles de style. Les utilisateurs malvoyants qui ont besoin de schémas de couleurs spécifiques (contraste élevé, couleurs inversées, combinaisons de couleurs personnalisées), les utilisateurs avec dyslexie qui ont besoin de polices particulières, et les utilisateurs qui ont besoin d'espacement de texte personnalisé ne peuvent pas appliquer leurs préférences d'accessibilité. Les styles en ligne verrouillent essentiellement la présentation visuelle, forçant tous les utilisateurs à voir le contenu exactement comme conçu indépendamment de leurs besoins.
Users with low vision who require custom color schemes or high contrast settings, users with dyslexia or reading disabilities who need specific fonts like OpenDyslexic or Comic Sans, users with light sensitivity who need dark mode or specific color combinations, users with cognitive disabilities who need customized text presentation, elderly users who need larger text with specific spacing, and users with color blindness who need adjusted color palettes
Utilisateurs malvoyants qui nécessitent des schémas de couleurs personnalisés ou des paramètres de contraste élevé, utilisateurs avec dyslexie ou troubles de lecture qui ont besoin de polices spécifiques comme OpenDyslexic ou Comic Sans, utilisateurs avec sensibilité à la lumière qui nécessitent un mode sombre ou des combinaisons de couleurs spécifiques, utilisateurs avec handicaps cognitifs qui ont besoin d'une présentation de texte personnalisée, utilisateurs âgés qui nécessitent un texte plus grand avec un espacement spécifique, et utilisateurs daltoniens qui ont besoin de palettes de couleurs ajustées
Touchpoint Styles Styles
Impact High Élevé
WCAG , WCAG ,
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 2 WCAG 2
WCAG 4 WCAG 4
WCAG 4 WCAG 4
WCAG 5 WCAG 5
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[1]/div[5]/ul[1]/li[1]
<li style="color: #000000; background-color: #ffffff; " class="wp-social-link wp-social-link-facebook has-secondary-color has-background-background-color wp-block-social-link"><a rel="noopener nofollo...
Inline style attributes define color or font properties directly on HTML elements, overriding user stylesheets and preventing users from customizing visual presentation
Les attributs de style en ligne définissent des propriétés de couleur ou de police directement sur les éléments HTML, remplaçant les feuilles de style utilisateur et empêchant les utilisateurs de personnaliser la présentation visuelle
When colors and fonts are hard-coded in inline style attributes, CSS specificity rules make them extremely difficult for users to override with their own stylesheets. Users with low vision who need specific color schemes (high contrast, inverted colors, custom color combinations), users with dyslexia who need particular fonts, and users who need custom text spacing cannot apply their accessibility preferences. Inline styles essentially lock visual presentation, forcing all users to view content exactly as designed regardless of their needs.
Quand les couleurs et polices sont codées en dur dans les attributs de style en ligne, les règles de spécificité CSS les rendent extrêmement difficiles à remplacer par les utilisateurs avec leurs propres feuilles de style. Les utilisateurs malvoyants qui ont besoin de schémas de couleurs spécifiques (contraste élevé, couleurs inversées, combinaisons de couleurs personnalisées), les utilisateurs avec dyslexie qui ont besoin de polices particulières, et les utilisateurs qui ont besoin d'espacement de texte personnalisé ne peuvent pas appliquer leurs préférences d'accessibilité. Les styles en ligne verrouillent essentiellement la présentation visuelle, forçant tous les utilisateurs à voir le contenu exactement comme conçu indépendamment de leurs besoins.
Users with low vision who require custom color schemes or high contrast settings, users with dyslexia or reading disabilities who need specific fonts like OpenDyslexic or Comic Sans, users with light sensitivity who need dark mode or specific color combinations, users with cognitive disabilities who need customized text presentation, elderly users who need larger text with specific spacing, and users with color blindness who need adjusted color palettes
Utilisateurs malvoyants qui nécessitent des schémas de couleurs personnalisés ou des paramètres de contraste élevé, utilisateurs avec dyslexie ou troubles de lecture qui ont besoin de polices spécifiques comme OpenDyslexic ou Comic Sans, utilisateurs avec sensibilité à la lumière qui nécessitent un mode sombre ou des combinaisons de couleurs spécifiques, utilisateurs avec handicaps cognitifs qui ont besoin d'une présentation de texte personnalisée, utilisateurs âgés qui nécessitent un texte plus grand avec un espacement spécifique, et utilisateurs daltoniens qui ont besoin de palettes de couleurs ajustées
Touchpoint Styles Styles
Impact High Élevé
WCAG , WCAG ,
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 2 WCAG 2
WCAG 4 WCAG 4
WCAG 4 WCAG 4
WCAG 5 WCAG 5
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[1]/div[5]/ul[1]/li[2]
<li style="color: #000000; background-color: #ffffff; " class="wp-social-link wp-social-link-twitter has-secondary-color has-background-background-color twitter-icon wp-block-social-link"><a rel="noop...
Inline style attributes define color or font properties directly on HTML elements, overriding user stylesheets and preventing users from customizing visual presentation
Les attributs de style en ligne définissent des propriétés de couleur ou de police directement sur les éléments HTML, remplaçant les feuilles de style utilisateur et empêchant les utilisateurs de personnaliser la présentation visuelle
When colors and fonts are hard-coded in inline style attributes, CSS specificity rules make them extremely difficult for users to override with their own stylesheets. Users with low vision who need specific color schemes (high contrast, inverted colors, custom color combinations), users with dyslexia who need particular fonts, and users who need custom text spacing cannot apply their accessibility preferences. Inline styles essentially lock visual presentation, forcing all users to view content exactly as designed regardless of their needs.
Quand les couleurs et polices sont codées en dur dans les attributs de style en ligne, les règles de spécificité CSS les rendent extrêmement difficiles à remplacer par les utilisateurs avec leurs propres feuilles de style. Les utilisateurs malvoyants qui ont besoin de schémas de couleurs spécifiques (contraste élevé, couleurs inversées, combinaisons de couleurs personnalisées), les utilisateurs avec dyslexie qui ont besoin de polices particulières, et les utilisateurs qui ont besoin d'espacement de texte personnalisé ne peuvent pas appliquer leurs préférences d'accessibilité. Les styles en ligne verrouillent essentiellement la présentation visuelle, forçant tous les utilisateurs à voir le contenu exactement comme conçu indépendamment de leurs besoins.
Users with low vision who require custom color schemes or high contrast settings, users with dyslexia or reading disabilities who need specific fonts like OpenDyslexic or Comic Sans, users with light sensitivity who need dark mode or specific color combinations, users with cognitive disabilities who need customized text presentation, elderly users who need larger text with specific spacing, and users with color blindness who need adjusted color palettes
Utilisateurs malvoyants qui nécessitent des schémas de couleurs personnalisés ou des paramètres de contraste élevé, utilisateurs avec dyslexie ou troubles de lecture qui ont besoin de polices spécifiques comme OpenDyslexic ou Comic Sans, utilisateurs avec sensibilité à la lumière qui nécessitent un mode sombre ou des combinaisons de couleurs spécifiques, utilisateurs avec handicaps cognitifs qui ont besoin d'une présentation de texte personnalisée, utilisateurs âgés qui nécessitent un texte plus grand avec un espacement spécifique, et utilisateurs daltoniens qui ont besoin de palettes de couleurs ajustées
Touchpoint Styles Styles
Impact High Élevé
WCAG , WCAG ,
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 2 WCAG 2
WCAG 4 WCAG 4
WCAG 4 WCAG 4
WCAG 5 WCAG 5
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[1]/div[5]/ul[1]/li[3]
<li style="color: #000000; background-color: #ffffff; " class="wp-social-link wp-social-link-youtube has-secondary-color has-background-background-color wp-block-social-link"><a rel="noopener nofollow...
Inline style attributes define color or font properties directly on HTML elements, overriding user stylesheets and preventing users from customizing visual presentation
Les attributs de style en ligne définissent des propriétés de couleur ou de police directement sur les éléments HTML, remplaçant les feuilles de style utilisateur et empêchant les utilisateurs de personnaliser la présentation visuelle
When colors and fonts are hard-coded in inline style attributes, CSS specificity rules make them extremely difficult for users to override with their own stylesheets. Users with low vision who need specific color schemes (high contrast, inverted colors, custom color combinations), users with dyslexia who need particular fonts, and users who need custom text spacing cannot apply their accessibility preferences. Inline styles essentially lock visual presentation, forcing all users to view content exactly as designed regardless of their needs.
Quand les couleurs et polices sont codées en dur dans les attributs de style en ligne, les règles de spécificité CSS les rendent extrêmement difficiles à remplacer par les utilisateurs avec leurs propres feuilles de style. Les utilisateurs malvoyants qui ont besoin de schémas de couleurs spécifiques (contraste élevé, couleurs inversées, combinaisons de couleurs personnalisées), les utilisateurs avec dyslexie qui ont besoin de polices particulières, et les utilisateurs qui ont besoin d'espacement de texte personnalisé ne peuvent pas appliquer leurs préférences d'accessibilité. Les styles en ligne verrouillent essentiellement la présentation visuelle, forçant tous les utilisateurs à voir le contenu exactement comme conçu indépendamment de leurs besoins.
Users with low vision who require custom color schemes or high contrast settings, users with dyslexia or reading disabilities who need specific fonts like OpenDyslexic or Comic Sans, users with light sensitivity who need dark mode or specific color combinations, users with cognitive disabilities who need customized text presentation, elderly users who need larger text with specific spacing, and users with color blindness who need adjusted color palettes
Utilisateurs malvoyants qui nécessitent des schémas de couleurs personnalisés ou des paramètres de contraste élevé, utilisateurs avec dyslexie ou troubles de lecture qui ont besoin de polices spécifiques comme OpenDyslexic ou Comic Sans, utilisateurs avec sensibilité à la lumière qui nécessitent un mode sombre ou des combinaisons de couleurs spécifiques, utilisateurs avec handicaps cognitifs qui ont besoin d'une présentation de texte personnalisée, utilisateurs âgés qui nécessitent un texte plus grand avec un espacement spécifique, et utilisateurs daltoniens qui ont besoin de palettes de couleurs ajustées
Touchpoint Styles Styles
Impact High Élevé
WCAG , WCAG ,
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 2 WCAG 2
WCAG 4 WCAG 4
WCAG 4 WCAG 4
WCAG 5 WCAG 5
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[1]/div[5]/ul[1]/li[4]
<li style="color: #000000; background-color: #ffffff; " class="wp-social-link wp-social-link-instagram has-secondary-color has-background-background-color wp-block-social-link"><a rel="noopener nofoll...
Inline style attributes define color or font properties directly on HTML elements, overriding user stylesheets and preventing users from customizing visual presentation
Les attributs de style en ligne définissent des propriétés de couleur ou de police directement sur les éléments HTML, remplaçant les feuilles de style utilisateur et empêchant les utilisateurs de personnaliser la présentation visuelle
When colors and fonts are hard-coded in inline style attributes, CSS specificity rules make them extremely difficult for users to override with their own stylesheets. Users with low vision who need specific color schemes (high contrast, inverted colors, custom color combinations), users with dyslexia who need particular fonts, and users who need custom text spacing cannot apply their accessibility preferences. Inline styles essentially lock visual presentation, forcing all users to view content exactly as designed regardless of their needs.
Quand les couleurs et polices sont codées en dur dans les attributs de style en ligne, les règles de spécificité CSS les rendent extrêmement difficiles à remplacer par les utilisateurs avec leurs propres feuilles de style. Les utilisateurs malvoyants qui ont besoin de schémas de couleurs spécifiques (contraste élevé, couleurs inversées, combinaisons de couleurs personnalisées), les utilisateurs avec dyslexie qui ont besoin de polices particulières, et les utilisateurs qui ont besoin d'espacement de texte personnalisé ne peuvent pas appliquer leurs préférences d'accessibilité. Les styles en ligne verrouillent essentiellement la présentation visuelle, forçant tous les utilisateurs à voir le contenu exactement comme conçu indépendamment de leurs besoins.
Users with low vision who require custom color schemes or high contrast settings, users with dyslexia or reading disabilities who need specific fonts like OpenDyslexic or Comic Sans, users with light sensitivity who need dark mode or specific color combinations, users with cognitive disabilities who need customized text presentation, elderly users who need larger text with specific spacing, and users with color blindness who need adjusted color palettes
Utilisateurs malvoyants qui nécessitent des schémas de couleurs personnalisés ou des paramètres de contraste élevé, utilisateurs avec dyslexie ou troubles de lecture qui ont besoin de polices spécifiques comme OpenDyslexic ou Comic Sans, utilisateurs avec sensibilité à la lumière qui nécessitent un mode sombre ou des combinaisons de couleurs spécifiques, utilisateurs avec handicaps cognitifs qui ont besoin d'une présentation de texte personnalisée, utilisateurs âgés qui nécessitent un texte plus grand avec un espacement spécifique, et utilisateurs daltoniens qui ont besoin de palettes de couleurs ajustées
Touchpoint Styles Styles
Impact High Élevé
WCAG , WCAG ,
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 2 WCAG 2
WCAG 4 WCAG 4
WCAG 4 WCAG 4
WCAG 5 WCAG 5
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[1]/div[5]/ul[1]/li[5]
<li style="color: #000000; background-color: #ffffff; " class="wp-social-link wp-social-link-linkedin has-secondary-color has-background-background-color wp-block-social-link"><a rel="noopener nofollo...
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Touchpoint Styles Styles
Impact High Élevé
WCAG , WCAG ,
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 2 WCAG 2
WCAG 4 WCAG 4
WCAG 4 WCAG 4
WCAG 5 WCAG 5
Location
/html[1]/head[1]/style[4]
<style>
img.wp-smiley, img.emoji {
display: inline !important;
border: none !important;
box-shadow: none !important;
height: 1em !important;
width: 1em !important;
margin: 0 0.07em !important;
vertical-align: -0.1em !important;
background: none !important;
padding: 0 !important;
}
</style>
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Touchpoint Styles Styles
Impact High Élevé
WCAG , WCAG ,
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 2 WCAG 2
WCAG 4 WCAG 4
WCAG 4 WCAG 4
WCAG 5 WCAG 5
Location
/html[1]/head[1]/style[5]
<style>
/*! This file is auto-generated */
.wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none}
</style>
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Touchpoint Styles Styles
Impact High Élevé
WCAG , WCAG ,
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 2 WCAG 2
WCAG 4 WCAG 4
WCAG 4 WCAG 4
WCAG 5 WCAG 5
Location
/html[1]/head[1]/style[6]
<style>
.jetpack-sharing-buttons__services-list{display:flex;flex-direction:row;flex-wrap:wrap;gap:0;list-style-type:none;margin:5px;padding:0}.jetpack-sharing-buttons__services-list.has-small-icon-size{font-size:12px}.jetpack-sharing-buttons__services-list.has-normal-icon-size{font-size:16px}.jetpack-shar...</style>
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Touchpoint Styles Styles
Impact High Élevé
WCAG , WCAG ,
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 2 WCAG 2
WCAG 4 WCAG 4
WCAG 4 WCAG 4
WCAG 5 WCAG 5
Location
/html[1]/head[1]/style[8]
<style>
:root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #...</style>
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Touchpoint Styles Styles
Impact High Élevé
WCAG , WCAG ,
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 2 WCAG 2
WCAG 4 WCAG 4
WCAG 4 WCAG 4
WCAG 5 WCAG 5
Location
/html[1]/head[1]/style[9]
<style>
#gspb_heading-id-gsbp-cd687134-696e{font-size:40px;margin-top:0;margin-bottom:15px}#gspb_iconsList-id-gsbp-184db67b-1523.gspb_iconsList .gspb_iconsList__item__text{margin-left:15px}#gspb_iconsList-id-gsbp-184db67b-1523.gspb_iconsList .gspb_iconsList__item{justify-content:flex-start;display:flex;fle...</style>
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Touchpoint Styles Styles
Impact High Élevé
WCAG , WCAG ,
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 2 WCAG 2
WCAG 4 WCAG 4
WCAG 4 WCAG 4
WCAG 5 WCAG 5
Location
/html[1]/head[1]/style[12]
<style>/* Workplace accomodations */
.workplaceaccomodation-h1 h1 {
font-size: 50px;
}
/* Blog */
.blog-thumb-inner {
background-size: contain;
}
/* Hide elements
* */
.woocommerce-cart-form__contents .product-thumbnail, .wpml-ls-current-language, .wpml-ls-display {
display: none !important;
}
/...</style>
Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order
Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.
Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.
Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles
Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés
Touchpoint Styles Styles
Impact High Élevé
WCAG , WCAG ,
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 2 WCAG 2
WCAG 4 WCAG 4
WCAG 4 WCAG 4
WCAG 5 WCAG 5
Location
/html[1]/body[1]/style[1]
<style>
:root :where(.wp-block-button.is-style-outline--1 .wp-block-button__link){background: transparent none;border-color: currentColor;border-width: 2px;border-style: solid;color: currentColor;padding-top: 0.667em;padding-right: 1.33em;padding-bottom: 0.667em;padding-left: 1.33em;}
</style>
Iframe element is missing the required title attribute
L'élément iframe ne contient pas l'attribut title requis
Iframes embed external content like videos, maps, or forms within your page. Without a title attribute, screen reader users hear only "iframe" with no indication of what content it contains. This is like having a door with no label - users don't know what's behind it. They must enter the iframe and explore its content to understand its purpose, which is time-consuming and may be confusing if the iframe content lacks context. For pages with multiple iframes, users cannot distinguish between them or decide which ones are worth exploring.
Les iframes intègrent du contenu externe comme des vidéos, cartes ou formulaires dans votre page. Sans attribut title, les utilisateurs de lecteurs d'écran n'entendent que « iframe » sans indication du contenu qu'elle contient. C'est comme avoir une porte sans étiquette - les utilisateurs ne savent pas ce qu'il y a derrière. Ils doivent entrer dans l'iframe et explorer son contenu pour comprendre son objectif, ce qui prend du temps et peut être déroutant si le contenu de l'iframe manque de contexte. Pour les pages avec plusieurs iframes, les utilisateurs ne peuvent pas les distinguer ou décider lesquelles valent la peine d'être explorées.
Screen reader users who need to understand what each iframe contains before deciding whether to interact with it, keyboard users navigating through iframes who need context about embedded content, users with cognitive disabilities who need clear labeling of all page regions, and users on slow connections who may experience delays loading iframe content
Utilisateurs de lecteurs d'écran qui ont besoin de comprendre ce que contient chaque iframe avant de décider d'interagir avec elle, utilisateurs de clavier naviguant à travers les iframes qui ont besoin de contexte sur le contenu intégré, utilisateurs avec des handicaps cognitifs qui ont besoin d'un étiquetage clair de toutes les régions de la page, et utilisateurs avec des connexions lentes qui peuvent subir des retards de chargement du contenu iframe
Touchpoint Title Attributes Title Attributes
Impact High Élevé
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 2 WCAG 2
Location
//*[@id="recaptcha-holder-0"]/iframe[1]
<iframe style="display: none;"></iframe>
Form element is using title attribute as its only accessible label, which is insufficient for accessibility
L'élément de formulaire utilise l'attribut title comme seule étiquette accessible, ce qui est insuffisant pour l'accessibilité
When title is the only labeling mechanism for a form field, many users cannot determine what information to enter. Title attributes are not announced by screen readers when navigating forms in normal mode, don't appear on mobile devices, cannot be accessed by keyboard users, and disappear too quickly for many users to read. This makes the form field essentially unlabeled for a large portion of users, preventing them from completing forms successfully.
Lorsque title est le seul mécanisme d'étiquetage pour un champ de formulaire, de nombreux utilisateurs ne peuvent pas déterminer quelles informations saisir. Les attributs title ne sont pas annoncés par les lecteurs d'écran lors de la navigation dans les formulaires en mode normal, n'apparaissent pas sur les appareils mobiles, ne peuvent pas être accessibles aux utilisateurs de clavier, et disparaissent trop rapidement pour que de nombreux utilisateurs puissent les lire. Cela rend le champ de formulaire essentiellement non étiqueté pour une grande partie des utilisateurs, les empêchant de compléter les formulaires avec succès.
Screen reader users who won't hear the field's purpose when navigating the form, mobile users who cannot see title tooltips at all, keyboard users who cannot hover to see the tooltip, users with motor disabilities who struggle with precise hovering, users with cognitive disabilities who need persistent labels as memory aids, and voice control users who cannot reference fields without visible labels
Utilisateurs de lecteurs d'écran qui n'entendront pas l'objectif du champ lors de la navigation dans le formulaire, utilisateurs mobiles qui ne peuvent pas voir les infobulles title du tout, utilisateurs de clavier qui ne peuvent pas survoler pour voir l'infobulle, utilisateurs avec des handicaps moteurs qui ont des difficultés avec le survol précis, utilisateurs avec des handicaps cognitifs qui ont besoin d'étiquettes persistantes comme aide-mémoire, et utilisateurs de contrôle vocal qui ne peuvent pas référencer les champs sans étiquettes visibles
Touchpoint Title Attributes Title Attributes
Impact High Élevé
WCAG , WCAG ,
WCAG , WCAG ,
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 2 WCAG 2
WCAG 3 WCAG 3
Location
//*[@id="wpcf-custom-btn-0"]
<input type="button" id="wpcf-custom-btn-0" class="wpcf7-form-control wpcf7-submit has-spinner recaptcha-btn recaptcha-btn-type-css" value="Submit" title="Submit">
Site doesn't support prefers-color-scheme media query to adapt to user's operating system color scheme preferences
Le site ne prend pas en charge la requête média prefers-color-scheme pour s'adapter aux préférences de schéma de couleurs du système d'exploitation de l'utilisateur
Many users with light sensitivity, photophobia, or visual impairments require dark mode to comfortably use digital interfaces. Users who have configured their operating system to use dark mode expect websites to honor that preference. Without dark mode support, these users experience eye strain, headaches, and difficulty reading content. Similarly, users in bright environments may prefer light mode for better readability. By not supporting color scheme preferences, the site fails to provide an accessibility-supported experience for users who require these accommodations.
De nombreux utilisateurs souffrant de sensibilité à la lumière, de photophobie ou de déficiences visuelles nécessitent le mode sombre pour utiliser confortablement les interfaces numériques. Les utilisateurs qui ont configuré leur système d'exploitation pour utiliser le mode sombre s'attendent à ce que les sites web respectent cette préférence. Sans prise en charge du mode sombre, ces utilisateurs subissent une fatigue oculaire, des maux de tête et des difficultés à lire le contenu. De même, les utilisateurs dans des environnements lumineux peuvent préférer le mode clair pour une meilleure lisibilité. En ne prenant pas en charge les préférences de schéma de couleurs, le site ne parvient pas à fournir une expérience accessible pour les utilisateurs qui nécessitent ces adaptations.
Users with light sensitivity or photophobia who require dark mode, users with migraines triggered by bright screens, users with visual impairments who find dark backgrounds easier to read, users working in low-light environments, users who have configured OS-level dark mode for accessibility reasons, users with astigmatism who experience less blur with dark backgrounds, elderly users who prefer high contrast dark themes
Utilisateurs souffrant de sensibilité à la lumière ou de photophobie qui nécessitent le mode sombre, utilisateurs souffrant de migraines déclenchées par des écrans lumineux, utilisateurs malvoyants qui trouvent les arrière-plans sombres plus faciles à lire, utilisateurs travaillant dans des environnements peu éclairés, utilisateurs qui ont configuré le mode sombre au niveau du système d'exploitation pour des raisons d'accessibilité, utilisateurs souffrant d'astigmatisme qui subissent moins de flou avec des arrière-plans sombres, utilisateurs âgés qui préfèrent les thèmes sombres à contraste élevé
Touchpoint Colors Couleurs
Impact Medium Moyen
WCAG , WCAG ,
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 2 WCAG 2
WCAG 3 WCAG 3
WCAG 4 WCAG 4
WCAG 4 WCAG 4
Location
/html
<page>
Site doesn't support prefers-contrast media query to adapt to user's operating system high contrast mode preferences
Le site ne prend pas en charge la requête média prefers-contrast pour s'adapter aux préférences de mode contraste élevé du système d'exploitation de l'utilisateur
Many users with low vision, color vision deficiencies, or visual impairments require high contrast mode to read digital content. Users who have configured their operating system to use high contrast mode (or request increased contrast) expect websites to honor that preference. High contrast mode significantly increases the contrast ratio between text and backgrounds, making content more readable for users with reduced visual acuity. Without high contrast support, these users experience difficulty reading text, distinguishing interface elements, and navigating the site. By not supporting contrast preferences, the site fails to provide an accessibility-supported experience for users who require these accommodations.
De nombreux utilisateurs malvoyants, souffrant de déficiences de la vision des couleurs ou de déficiences visuelles nécessitent le mode contraste élevé pour lire le contenu numérique. Les utilisateurs qui ont configuré leur système d'exploitation pour utiliser le mode contraste élevé (ou demander un contraste accru) s'attendent à ce que les sites web respectent cette préférence. Le mode contraste élevé augmente significativement le ratio de contraste entre le texte et les arrière-plans, rendant le contenu plus lisible pour les utilisateurs avec une acuité visuelle réduite. Sans prise en charge du contraste élevé, ces utilisateurs éprouvent des difficultés à lire le texte, distinguer les éléments d'interface et naviguer sur le site. En ne prenant pas en charge les préférences de contraste, le site ne parvient pas à fournir une expérience accessible pour les utilisateurs qui nécessitent ces adaptations.
Users with low vision who require high contrast to read text, users with color vision deficiencies (color blindness) who need stronger contrast, users with cataracts or other vision conditions that reduce contrast sensitivity, elderly users with age-related vision decline, users with light sensitivity who need higher contrast in certain lighting conditions, users working in bright sunlight who need increased contrast, users with astigmatism who benefit from higher contrast ratios, users who have configured OS-level high contrast mode for accessibility reasons
Utilisateurs malvoyants qui nécessitent un contraste élevé pour lire le texte, utilisateurs souffrant de déficiences de la vision des couleurs (daltonisme) qui ont besoin d'un contraste plus fort, utilisateurs souffrant de cataractes ou d'autres conditions visuelles qui réduisent la sensibilité au contraste, utilisateurs âgés avec un déclin visuel lié à l'âge, utilisateurs souffrant de sensibilité à la lumière qui ont besoin d'un contraste plus élevé dans certaines conditions d'éclairage, utilisateurs travaillant en plein soleil qui ont besoin d'un contraste accru, utilisateurs souffrant d'astigmatisme qui bénéficient de ratios de contraste plus élevés, utilisateurs qui ont configuré le mode contraste élevé au niveau du système d'exploitation pour des raisons d'accessibilité
Touchpoint Colors Couleurs
Impact Medium Moyen
WCAG , WCAG ,
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 2 WCAG 2
WCAG 3 WCAG 3
WCAG 4 WCAG 4
WCAG 4 WCAG 4
Location
/html
<page>
Line height is %(lineHeight)spx with a ratio of %(ratio)s for font size %(fontSize)spx. Best practice recommends line height of at least 1.5 times the font size, especially for blocks of text with multiple adjacent lines.
La hauteur de ligne est de %(lineHeight)spx avec un ratio de %(ratio)s pour une taille de police de %(fontSize)spx. Les bonnes pratiques recommandent une hauteur de ligne d'au moins 1,5 fois la taille de police, particulièrement pour les blocs de texte avec plusieurs lignes adjacentes.
Tight line spacing makes text difficult to read and track, especially for blocks of text. Adequate line spacing (1.5x or higher) helps users with dyslexia distinguish lines, improves reading comprehension, and reduces eye strain. This fails WCAG 5.2.4 Accessibility Supported because insufficient line height forces users to rely on assistive technologies (custom stylesheets, browser extensions, or reader modes) when they otherwise wouldn't need them. The content should be accessibility-supported by default, not require users to apply technical workarounds to make it readable.
Un espacement de ligne serré rend le texte difficile à lire et à suivre, particulièrement pour les blocs de texte. Un espacement de ligne adéquat (1,5x ou plus) aide les utilisateurs dyslexiques à distinguer les lignes, améliore la compréhension de lecture et réduit la fatigue oculaire. Ceci échoue au critère WCAG 5.2.4 Prise en charge de l'accessibilité car une hauteur de ligne insuffisante force les utilisateurs à recourir aux technologies d'assistance (feuilles de style personnalisées, extensions de navigateur ou modes de lecture) alors qu'ils n'en auraient pas besoin autrement. Le contenu devrait être accessible par défaut, sans obliger les utilisateurs à appliquer des solutions techniques pour le rendre lisible.
Users with dyslexia who need clear line separation, users with low vision who track lines of text, older users, users with reading disabilities, users who experience eye strain.
Utilisateurs dyslexiques qui ont besoin d'une séparation claire des lignes, utilisateurs malvoyants qui suivent les lignes de texte, utilisateurs âgés, utilisateurs avec des troubles de la lecture, utilisateurs qui éprouvent de la fatigue oculaire.
Touchpoint Fonts Polices
Impact Medium Moyen
WCAG . WCAG .
WCAG . WCAG .
WCAG 2 WCAG 2
WCAG 4 WCAG 4
Location
/html[1]/body[1]/footer[1]/div[1]/div[1]/div[1]/h2[1]/strong[1]
<strong>Subscribe to our newsletter</strong>
Line height is %(lineHeight)spx with a ratio of %(ratio)s for font size %(fontSize)spx. Best practice recommends line height of at least 1.5 times the font size, especially for blocks of text with multiple adjacent lines.
La hauteur de ligne est de %(lineHeight)spx avec un ratio de %(ratio)s pour une taille de police de %(fontSize)spx. Les bonnes pratiques recommandent une hauteur de ligne d'au moins 1,5 fois la taille de police, particulièrement pour les blocs de texte avec plusieurs lignes adjacentes.
Tight line spacing makes text difficult to read and track, especially for blocks of text. Adequate line spacing (1.5x or higher) helps users with dyslexia distinguish lines, improves reading comprehension, and reduces eye strain. This fails WCAG 5.2.4 Accessibility Supported because insufficient line height forces users to rely on assistive technologies (custom stylesheets, browser extensions, or reader modes) when they otherwise wouldn't need them. The content should be accessibility-supported by default, not require users to apply technical workarounds to make it readable.
Un espacement de ligne serré rend le texte difficile à lire et à suivre, particulièrement pour les blocs de texte. Un espacement de ligne adéquat (1,5x ou plus) aide les utilisateurs dyslexiques à distinguer les lignes, améliore la compréhension de lecture et réduit la fatigue oculaire. Ceci échoue au critère WCAG 5.2.4 Prise en charge de l'accessibilité car une hauteur de ligne insuffisante force les utilisateurs à recourir aux technologies d'assistance (feuilles de style personnalisées, extensions de navigateur ou modes de lecture) alors qu'ils n'en auraient pas besoin autrement. Le contenu devrait être accessible par défaut, sans obliger les utilisateurs à appliquer des solutions techniques pour le rendre lisible.
Users with dyslexia who need clear line separation, users with low vision who track lines of text, older users, users with reading disabilities, users who experience eye strain.
Utilisateurs dyslexiques qui ont besoin d'une séparation claire des lignes, utilisateurs malvoyants qui suivent les lignes de texte, utilisateurs âgés, utilisateurs avec des troubles de la lecture, utilisateurs qui éprouvent de la fatigue oculaire.
Touchpoint Fonts Polices
Impact Medium Moyen
WCAG . WCAG .
WCAG . WCAG .
WCAG 2 WCAG 2
WCAG 4 WCAG 4
Location
/html[1]/body[1]/footer[1]/div[1]/div[1]/div[3]/div[1]/div[1]/a[1]
<a class="wp-block-button__link wp-element-button" href="https://cnib-accesslabs.ca/subscribe/">Subscribe</a>
Line height is %(lineHeight)spx with a ratio of %(ratio)s for font size %(fontSize)spx. Best practice recommends line height of at least 1.5 times the font size, especially for blocks of text with multiple adjacent lines.
La hauteur de ligne est de %(lineHeight)spx avec un ratio de %(ratio)s pour une taille de police de %(fontSize)spx. Les bonnes pratiques recommandent une hauteur de ligne d'au moins 1,5 fois la taille de police, particulièrement pour les blocs de texte avec plusieurs lignes adjacentes.
Tight line spacing makes text difficult to read and track, especially for blocks of text. Adequate line spacing (1.5x or higher) helps users with dyslexia distinguish lines, improves reading comprehension, and reduces eye strain. This fails WCAG 5.2.4 Accessibility Supported because insufficient line height forces users to rely on assistive technologies (custom stylesheets, browser extensions, or reader modes) when they otherwise wouldn't need them. The content should be accessibility-supported by default, not require users to apply technical workarounds to make it readable.
Un espacement de ligne serré rend le texte difficile à lire et à suivre, particulièrement pour les blocs de texte. Un espacement de ligne adéquat (1,5x ou plus) aide les utilisateurs dyslexiques à distinguer les lignes, améliore la compréhension de lecture et réduit la fatigue oculaire. Ceci échoue au critère WCAG 5.2.4 Prise en charge de l'accessibilité car une hauteur de ligne insuffisante force les utilisateurs à recourir aux technologies d'assistance (feuilles de style personnalisées, extensions de navigateur ou modes de lecture) alors qu'ils n'en auraient pas besoin autrement. Le contenu devrait être accessible par défaut, sans obliger les utilisateurs à appliquer des solutions techniques pour le rendre lisible.
Users with dyslexia who need clear line separation, users with low vision who track lines of text, older users, users with reading disabilities, users who experience eye strain.
Utilisateurs dyslexiques qui ont besoin d'une séparation claire des lignes, utilisateurs malvoyants qui suivent les lignes de texte, utilisateurs âgés, utilisateurs avec des troubles de la lecture, utilisateurs qui éprouvent de la fatigue oculaire.
Touchpoint Fonts Polices
Impact Medium Moyen
WCAG . WCAG .
WCAG . WCAG .
WCAG 2 WCAG 2
WCAG 4 WCAG 4
Location
/html[1]/body[1]/footer[1]/div[2]/h2[1]
<h2 class="screen-reader-text">Footer</h2>
Button has a focus outline with outline-offset and outline-width values that, when combined, cause the outline to extend beyond the boundaries of its parent container. Since the outline sits against the parent's background, but extends past the parent's edges, we cannot determine what background the extended portion of the outline sits against.
Le bouton a un contour de focus avec des valeurs outline-offset et outline-width qui, combinées, font que le contour s'étend au-delà des limites de son conteneur parent. Puisque le contour se trouve contre l'arrière-plan du parent, mais s'étend au-delà des bords du parent, nous ne pouvons déterminer contre quel arrière-plan se trouve la partie étendue du contour.
When outline-offset is positive, the outline sits outside the button against the parent container's background. The total extent of the outline is outline-offset + outline-width. If this total exceeds the distance from the button edge to the parent edge on any side, the outline extends past the parent boundary into whatever content lies beyond. The outline may sit against varying backgrounds outside the parent (page background, sibling elements, grandparent containers, etc.), making automatic contrast verification impossible. CSS outline-offset has no maximum limit, so extremely large values (e.g., outline-offset: 50px) can easily exceed typical parent padding and margins.
Quand outline-offset est positif, le contour se trouve à l'extérieur du bouton contre l'arrière-plan du conteneur parent. L'étendue totale du contour est outline-offset + outline-width. Si ce total dépasse la distance du bord du bouton au bord du parent sur n'importe quel côté, le contour s'étend au-delà de la limite du parent dans tout contenu qui se trouve au-delà. Le contour peut se trouver contre des arrière-plans variables à l'extérieur du parent (arrière-plan de page, éléments frères, conteneurs grands-parents, etc.), rendant la vérification automatique du contraste impossible. CSS outline-offset n'a pas de limite maximale, donc des valeurs extrêmement grandes (ex. outline-offset: 50px) peuvent facilement dépasser le padding et les marges typiques du parent.
Keyboard navigation users, users with low vision, users with color vision deficiencies who need sufficient contrast between focus indicators and backgrounds
Utilisateurs de navigation au clavier, utilisateurs malvoyants, utilisateurs avec déficiences de vision des couleurs qui ont besoin d'un contraste suffisant entre les indicateurs de focus et les arrière-plans
Touchpoint Forms Formulaires
Impact Medium Moyen
WCAG , WCAG ,
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 2 WCAG 2
WCAG 4 WCAG 4
WCAG 4 WCAG 4
Location
//*[@id="menu-item-5067"]/button[1]
<button aria-haspopup="true" aria-expanded="true">Inclusive Built Environment</button>
Button has a focus outline with outline-offset and outline-width values that, when combined, cause the outline to extend beyond the boundaries of its parent container. Since the outline sits against the parent's background, but extends past the parent's edges, we cannot determine what background the extended portion of the outline sits against.
Le bouton a un contour de focus avec des valeurs outline-offset et outline-width qui, combinées, font que le contour s'étend au-delà des limites de son conteneur parent. Puisque le contour se trouve contre l'arrière-plan du parent, mais s'étend au-delà des bords du parent, nous ne pouvons déterminer contre quel arrière-plan se trouve la partie étendue du contour.
When outline-offset is positive, the outline sits outside the button against the parent container's background. The total extent of the outline is outline-offset + outline-width. If this total exceeds the distance from the button edge to the parent edge on any side, the outline extends past the parent boundary into whatever content lies beyond. The outline may sit against varying backgrounds outside the parent (page background, sibling elements, grandparent containers, etc.), making automatic contrast verification impossible. CSS outline-offset has no maximum limit, so extremely large values (e.g., outline-offset: 50px) can easily exceed typical parent padding and margins.
Quand outline-offset est positif, le contour se trouve à l'extérieur du bouton contre l'arrière-plan du conteneur parent. L'étendue totale du contour est outline-offset + outline-width. Si ce total dépasse la distance du bord du bouton au bord du parent sur n'importe quel côté, le contour s'étend au-delà de la limite du parent dans tout contenu qui se trouve au-delà. Le contour peut se trouver contre des arrière-plans variables à l'extérieur du parent (arrière-plan de page, éléments frères, conteneurs grands-parents, etc.), rendant la vérification automatique du contraste impossible. CSS outline-offset n'a pas de limite maximale, donc des valeurs extrêmement grandes (ex. outline-offset: 50px) peuvent facilement dépasser le padding et les marges typiques du parent.
Keyboard navigation users, users with low vision, users with color vision deficiencies who need sufficient contrast between focus indicators and backgrounds
Utilisateurs de navigation au clavier, utilisateurs malvoyants, utilisateurs avec déficiences de vision des couleurs qui ont besoin d'un contraste suffisant entre les indicateurs de focus et les arrière-plans
Touchpoint Forms Formulaires
Impact Medium Moyen
WCAG , WCAG ,
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 2 WCAG 2
WCAG 4 WCAG 4
WCAG 4 WCAG 4
Location
//*[@id="menu-item-5068"]/button[1]
<button aria-haspopup="true" aria-expanded="true">Inclusive Digital Design & Testing</button>
Button has a focus outline with outline-offset and outline-width values that, when combined, cause the outline to extend beyond the boundaries of its parent container. Since the outline sits against the parent's background, but extends past the parent's edges, we cannot determine what background the extended portion of the outline sits against.
Le bouton a un contour de focus avec des valeurs outline-offset et outline-width qui, combinées, font que le contour s'étend au-delà des limites de son conteneur parent. Puisque le contour se trouve contre l'arrière-plan du parent, mais s'étend au-delà des bords du parent, nous ne pouvons déterminer contre quel arrière-plan se trouve la partie étendue du contour.
When outline-offset is positive, the outline sits outside the button against the parent container's background. The total extent of the outline is outline-offset + outline-width. If this total exceeds the distance from the button edge to the parent edge on any side, the outline extends past the parent boundary into whatever content lies beyond. The outline may sit against varying backgrounds outside the parent (page background, sibling elements, grandparent containers, etc.), making automatic contrast verification impossible. CSS outline-offset has no maximum limit, so extremely large values (e.g., outline-offset: 50px) can easily exceed typical parent padding and margins.
Quand outline-offset est positif, le contour se trouve à l'extérieur du bouton contre l'arrière-plan du conteneur parent. L'étendue totale du contour est outline-offset + outline-width. Si ce total dépasse la distance du bord du bouton au bord du parent sur n'importe quel côté, le contour s'étend au-delà de la limite du parent dans tout contenu qui se trouve au-delà. Le contour peut se trouver contre des arrière-plans variables à l'extérieur du parent (arrière-plan de page, éléments frères, conteneurs grands-parents, etc.), rendant la vérification automatique du contraste impossible. CSS outline-offset n'a pas de limite maximale, donc des valeurs extrêmement grandes (ex. outline-offset: 50px) peuvent facilement dépasser le padding et les marges typiques du parent.
Keyboard navigation users, users with low vision, users with color vision deficiencies who need sufficient contrast between focus indicators and backgrounds
Utilisateurs de navigation au clavier, utilisateurs malvoyants, utilisateurs avec déficiences de vision des couleurs qui ont besoin d'un contraste suffisant entre les indicateurs de focus et les arrière-plans
Touchpoint Forms Formulaires
Impact Medium Moyen
WCAG , WCAG ,
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 2 WCAG 2
WCAG 4 WCAG 4
WCAG 4 WCAG 4
Location
//*[@id="menu-main-menu-1"]/li[1]/button[1]
<button aria-haspopup="true" aria-expanded="true">Inclusive Built Environment</button>
Button has a focus outline with outline-offset and outline-width values that, when combined, cause the outline to extend beyond the boundaries of its parent container. Since the outline sits against the parent's background, but extends past the parent's edges, we cannot determine what background the extended portion of the outline sits against.
Le bouton a un contour de focus avec des valeurs outline-offset et outline-width qui, combinées, font que le contour s'étend au-delà des limites de son conteneur parent. Puisque le contour se trouve contre l'arrière-plan du parent, mais s'étend au-delà des bords du parent, nous ne pouvons déterminer contre quel arrière-plan se trouve la partie étendue du contour.
When outline-offset is positive, the outline sits outside the button against the parent container's background. The total extent of the outline is outline-offset + outline-width. If this total exceeds the distance from the button edge to the parent edge on any side, the outline extends past the parent boundary into whatever content lies beyond. The outline may sit against varying backgrounds outside the parent (page background, sibling elements, grandparent containers, etc.), making automatic contrast verification impossible. CSS outline-offset has no maximum limit, so extremely large values (e.g., outline-offset: 50px) can easily exceed typical parent padding and margins.
Quand outline-offset est positif, le contour se trouve à l'extérieur du bouton contre l'arrière-plan du conteneur parent. L'étendue totale du contour est outline-offset + outline-width. Si ce total dépasse la distance du bord du bouton au bord du parent sur n'importe quel côté, le contour s'étend au-delà de la limite du parent dans tout contenu qui se trouve au-delà. Le contour peut se trouver contre des arrière-plans variables à l'extérieur du parent (arrière-plan de page, éléments frères, conteneurs grands-parents, etc.), rendant la vérification automatique du contraste impossible. CSS outline-offset n'a pas de limite maximale, donc des valeurs extrêmement grandes (ex. outline-offset: 50px) peuvent facilement dépasser le padding et les marges typiques du parent.
Keyboard navigation users, users with low vision, users with color vision deficiencies who need sufficient contrast between focus indicators and backgrounds
Utilisateurs de navigation au clavier, utilisateurs malvoyants, utilisateurs avec déficiences de vision des couleurs qui ont besoin d'un contraste suffisant entre les indicateurs de focus et les arrière-plans
Touchpoint Forms Formulaires
Impact Medium Moyen
WCAG , WCAG ,
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 2 WCAG 2
WCAG 4 WCAG 4
WCAG 4 WCAG 4
Location
//*[@id="menu-main-menu-1"]/li[2]/button[1]
<button aria-haspopup="true" aria-expanded="true">Inclusive Digital Design & Testing</button>
Form landmark accessible name includes redundant word "form"
Le nom accessible de la région repère de formulaire inclut le mot redondant "formulaire"
Screen readers already announce "form" as the element role, so including "form" in the accessible name creates redundant announcements like "Login form form". This adds unnecessary verbosity for screen reader users and doesn't follow best practices for ARIA labeling. The accessible name should be concise and describe the form's purpose without repeating the element type.
Les lecteurs d'écran annoncent déjà "formulaire" comme rôle de l'élément, donc inclure "formulaire" dans le nom accessible crée des annonces redondantes comme "formulaire de connexion formulaire". Cela ajoute une verbosité inutile pour les utilisateurs de lecteurs d'écran et ne suit pas les bonnes pratiques pour l'étiquetage ARIA. Le nom accessible devrait être concis et décrire l'objectif du formulaire sans répéter le type d'élément.
Screen reader users who hear redundant announcements when navigating forms, voice control users who need efficient commands
Utilisateurs de lecteurs d'écran qui entendent des annonces redondantes lors de la navigation dans les formulaires, utilisateurs de contrôle vocal qui ont besoin de commandes efficaces
Touchpoint Forms Formulaires
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 2 WCAG 2
WCAG 4 WCAG 4
Location
/html[1]/body[1]/main[1]/div[2]/div[1]/div[5]/form[1]
<form action="/contact-us/#wpcf7-f166-p16-o1" method="post" class="wpcf7-form init" aria-label="Contact form" novalidate="novalidate" data-status="init">
<fieldset class="hidden-fields-container"><inp
Input field has no custom focus styles defined and relies entirely on browser default focus indicators, which do not adapt to background colors and may have insufficient contrast or be invisible in certain contexts
Le champ de saisie n'a aucun style de focus personnalisé défini et s'appuie entièrement sur les indicateurs de focus par défaut du navigateur, qui ne s'adaptent pas aux couleurs d'arrière-plan et peuvent avoir un contraste insuffisant ou être invisibles dans certains contextes
The primary problem with default browser focus outlines on inputs is that they don't adapt to the background color behind them, creating contrast failures. A blue default outline may be invisible against a blue form background, or a dark outline invisible against dark input styling. This is the main reason default focus indicators fail accessibility requirements for inputs. Additionally, browser defaults are inconsistent - Chrome uses a blue outline, Safari uses a blue glow, Firefox uses a dotted outline, and these vary across operating systems and versions. Default styles often conflict with custom input styling (backgrounds, borders, shadows in normal and focus states), becoming invisible or creating visual confusion. Some default focus styles disappear entirely on custom-styled inputs. Relying on defaults means you have no control over accessibility compliance - your form might pass testing in Chrome on Windows but fail in Safari on macOS, or pass on a white background but fail on colored form sections.
Le problème principal avec les contours de focus par défaut du navigateur sur les champs de saisie est qu'ils ne s'adaptent pas à la couleur d'arrière-plan derrière eux, créant des échecs de contraste. Un contour bleu par défaut peut être invisible contre un arrière-plan de formulaire bleu, ou un contour sombre invisible contre un style de champ sombre. C'est la raison principale pour laquelle les indicateurs de focus par défaut échouent aux exigences d'accessibilité pour les champs de saisie. De plus, les styles par défaut des navigateurs sont incohérents - Chrome utilise un contour bleu, Safari utilise une lueur bleue, Firefox utilise un contour pointillé, et ceux-ci varient selon les systèmes d'exploitation et versions. Les styles par défaut entrent souvent en conflit avec le style personnalisé des champs (arrière-plans, bordures, ombres dans les états normal et focus), devenant invisibles ou créant une confusion visuelle. Certains styles de focus par défaut disparaissent entièrement sur les champs stylisés personnalisés. S'appuyer sur les styles par défaut signifie que vous n'avez aucun contrôle sur la conformité d'accessibilité - votre formulaire pourrait passer les tests dans Chrome sur Windows mais échouer dans Safari sur macOS, ou passer sur un arrière-plan blanc mais échouer sur des sections de formulaire colorées.
Keyboard users who lose track of which input field has focus when the outline blends into the background, users with low vision who cannot see low-contrast default outlines on various input backgrounds, users with color vision deficiencies who may not perceive certain default colors against certain form or input backgrounds, users filling out forms on different browsers and platforms expecting consistent focus indication, and quality assurance teams unable to ensure consistent, contrast-compliant focus indicators across all contexts
Utilisateurs de clavier qui perdent la trace du champ de saisie qui a le focus lorsque le contour se fond dans l'arrière-plan, utilisateurs malvoyants qui ne peuvent pas voir les contours par défaut à faible contraste sur divers arrière-plans de champs, utilisateurs avec des déficiences de vision des couleurs qui peuvent ne pas percevoir certaines couleurs par défaut contre certains arrière-plans de formulaire ou de champ, utilisateurs remplissant des formulaires sur différents navigateurs et plateformes s'attendant à une indication de focus cohérente, et équipes d'assurance qualité incapables d'assurer des indicateurs de focus cohérents et conformes au contraste dans tous les contextes
Touchpoint Forms Formulaires
Impact Medium Moyen
WCAG , WCAG ,
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 2 WCAG 2
WCAG 4 WCAG 4
WCAG 4 WCAG 4
Location
/html[1]/body[1]/main[1]/div[2]/div[1]/div[5]/form[1]/p[2]/label[1]/span[2]/input[1]
<input size="40" maxlength="400" class="wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email" aria-required="true" aria-invalid="false" value="" type="email"
Input field has no custom focus styles defined and relies entirely on browser default focus indicators, which do not adapt to background colors and may have insufficient contrast or be invisible in certain contexts
Le champ de saisie n'a aucun style de focus personnalisé défini et s'appuie entièrement sur les indicateurs de focus par défaut du navigateur, qui ne s'adaptent pas aux couleurs d'arrière-plan et peuvent avoir un contraste insuffisant ou être invisibles dans certains contextes
The primary problem with default browser focus outlines on inputs is that they don't adapt to the background color behind them, creating contrast failures. A blue default outline may be invisible against a blue form background, or a dark outline invisible against dark input styling. This is the main reason default focus indicators fail accessibility requirements for inputs. Additionally, browser defaults are inconsistent - Chrome uses a blue outline, Safari uses a blue glow, Firefox uses a dotted outline, and these vary across operating systems and versions. Default styles often conflict with custom input styling (backgrounds, borders, shadows in normal and focus states), becoming invisible or creating visual confusion. Some default focus styles disappear entirely on custom-styled inputs. Relying on defaults means you have no control over accessibility compliance - your form might pass testing in Chrome on Windows but fail in Safari on macOS, or pass on a white background but fail on colored form sections.
Le problème principal avec les contours de focus par défaut du navigateur sur les champs de saisie est qu'ils ne s'adaptent pas à la couleur d'arrière-plan derrière eux, créant des échecs de contraste. Un contour bleu par défaut peut être invisible contre un arrière-plan de formulaire bleu, ou un contour sombre invisible contre un style de champ sombre. C'est la raison principale pour laquelle les indicateurs de focus par défaut échouent aux exigences d'accessibilité pour les champs de saisie. De plus, les styles par défaut des navigateurs sont incohérents - Chrome utilise un contour bleu, Safari utilise une lueur bleue, Firefox utilise un contour pointillé, et ceux-ci varient selon les systèmes d'exploitation et versions. Les styles par défaut entrent souvent en conflit avec le style personnalisé des champs (arrière-plans, bordures, ombres dans les états normal et focus), devenant invisibles ou créant une confusion visuelle. Certains styles de focus par défaut disparaissent entièrement sur les champs stylisés personnalisés. S'appuyer sur les styles par défaut signifie que vous n'avez aucun contrôle sur la conformité d'accessibilité - votre formulaire pourrait passer les tests dans Chrome sur Windows mais échouer dans Safari sur macOS, ou passer sur un arrière-plan blanc mais échouer sur des sections de formulaire colorées.
Keyboard users who lose track of which input field has focus when the outline blends into the background, users with low vision who cannot see low-contrast default outlines on various input backgrounds, users with color vision deficiencies who may not perceive certain default colors against certain form or input backgrounds, users filling out forms on different browsers and platforms expecting consistent focus indication, and quality assurance teams unable to ensure consistent, contrast-compliant focus indicators across all contexts
Utilisateurs de clavier qui perdent la trace du champ de saisie qui a le focus lorsque le contour se fond dans l'arrière-plan, utilisateurs malvoyants qui ne peuvent pas voir les contours par défaut à faible contraste sur divers arrière-plans de champs, utilisateurs avec des déficiences de vision des couleurs qui peuvent ne pas percevoir certaines couleurs par défaut contre certains arrière-plans de formulaire ou de champ, utilisateurs remplissant des formulaires sur différents navigateurs et plateformes s'attendant à une indication de focus cohérente, et équipes d'assurance qualité incapables d'assurer des indicateurs de focus cohérents et conformes au contraste dans tous les contextes
Touchpoint Forms Formulaires
Impact Medium Moyen
WCAG , WCAG ,
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 2 WCAG 2
WCAG 4 WCAG 4
WCAG 4 WCAG 4
Location
/html[1]/body[1]/main[1]/div[2]/div[1]/div[5]/form[1]/p[5]/label[1]/span[2]/textarea[1]
<textarea cols="40" rows="10" maxlength="2000" class="wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required" aria-required="true" aria-invalid="false" name="your-message"></textarea>
Input field has no custom focus styles defined and relies entirely on browser default focus indicators, which do not adapt to background colors and may have insufficient contrast or be invisible in certain contexts
Le champ de saisie n'a aucun style de focus personnalisé défini et s'appuie entièrement sur les indicateurs de focus par défaut du navigateur, qui ne s'adaptent pas aux couleurs d'arrière-plan et peuvent avoir un contraste insuffisant ou être invisibles dans certains contextes
The primary problem with default browser focus outlines on inputs is that they don't adapt to the background color behind them, creating contrast failures. A blue default outline may be invisible against a blue form background, or a dark outline invisible against dark input styling. This is the main reason default focus indicators fail accessibility requirements for inputs. Additionally, browser defaults are inconsistent - Chrome uses a blue outline, Safari uses a blue glow, Firefox uses a dotted outline, and these vary across operating systems and versions. Default styles often conflict with custom input styling (backgrounds, borders, shadows in normal and focus states), becoming invisible or creating visual confusion. Some default focus styles disappear entirely on custom-styled inputs. Relying on defaults means you have no control over accessibility compliance - your form might pass testing in Chrome on Windows but fail in Safari on macOS, or pass on a white background but fail on colored form sections.
Le problème principal avec les contours de focus par défaut du navigateur sur les champs de saisie est qu'ils ne s'adaptent pas à la couleur d'arrière-plan derrière eux, créant des échecs de contraste. Un contour bleu par défaut peut être invisible contre un arrière-plan de formulaire bleu, ou un contour sombre invisible contre un style de champ sombre. C'est la raison principale pour laquelle les indicateurs de focus par défaut échouent aux exigences d'accessibilité pour les champs de saisie. De plus, les styles par défaut des navigateurs sont incohérents - Chrome utilise un contour bleu, Safari utilise une lueur bleue, Firefox utilise un contour pointillé, et ceux-ci varient selon les systèmes d'exploitation et versions. Les styles par défaut entrent souvent en conflit avec le style personnalisé des champs (arrière-plans, bordures, ombres dans les états normal et focus), devenant invisibles ou créant une confusion visuelle. Certains styles de focus par défaut disparaissent entièrement sur les champs stylisés personnalisés. S'appuyer sur les styles par défaut signifie que vous n'avez aucun contrôle sur la conformité d'accessibilité - votre formulaire pourrait passer les tests dans Chrome sur Windows mais échouer dans Safari sur macOS, ou passer sur un arrière-plan blanc mais échouer sur des sections de formulaire colorées.
Keyboard users who lose track of which input field has focus when the outline blends into the background, users with low vision who cannot see low-contrast default outlines on various input backgrounds, users with color vision deficiencies who may not perceive certain default colors against certain form or input backgrounds, users filling out forms on different browsers and platforms expecting consistent focus indication, and quality assurance teams unable to ensure consistent, contrast-compliant focus indicators across all contexts
Utilisateurs de clavier qui perdent la trace du champ de saisie qui a le focus lorsque le contour se fond dans l'arrière-plan, utilisateurs malvoyants qui ne peuvent pas voir les contours par défaut à faible contraste sur divers arrière-plans de champs, utilisateurs avec des déficiences de vision des couleurs qui peuvent ne pas percevoir certaines couleurs par défaut contre certains arrière-plans de formulaire ou de champ, utilisateurs remplissant des formulaires sur différents navigateurs et plateformes s'attendant à une indication de focus cohérente, et équipes d'assurance qualité incapables d'assurer des indicateurs de focus cohérents et conformes au contraste dans tous les contextes
Touchpoint Forms Formulaires
Impact Medium Moyen
WCAG , WCAG ,
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 2 WCAG 2
WCAG 4 WCAG 4
WCAG 4 WCAG 4
Location
/html[1]/body[1]/main[1]/div[2]/div[1]/div[5]/form[1]/p[7]/label[1]/textarea[1]
<textarea name="_wpcf7_ak_hp_textarea" cols="45" rows="8" maxlength="100"></textarea>
Input field has no custom focus styles defined and relies entirely on browser default focus indicators, which do not adapt to background colors and may have insufficient contrast or be invisible in certain contexts
Le champ de saisie n'a aucun style de focus personnalisé défini et s'appuie entièrement sur les indicateurs de focus par défaut du navigateur, qui ne s'adaptent pas aux couleurs d'arrière-plan et peuvent avoir un contraste insuffisant ou être invisibles dans certains contextes
The primary problem with default browser focus outlines on inputs is that they don't adapt to the background color behind them, creating contrast failures. A blue default outline may be invisible against a blue form background, or a dark outline invisible against dark input styling. This is the main reason default focus indicators fail accessibility requirements for inputs. Additionally, browser defaults are inconsistent - Chrome uses a blue outline, Safari uses a blue glow, Firefox uses a dotted outline, and these vary across operating systems and versions. Default styles often conflict with custom input styling (backgrounds, borders, shadows in normal and focus states), becoming invisible or creating visual confusion. Some default focus styles disappear entirely on custom-styled inputs. Relying on defaults means you have no control over accessibility compliance - your form might pass testing in Chrome on Windows but fail in Safari on macOS, or pass on a white background but fail on colored form sections.
Le problème principal avec les contours de focus par défaut du navigateur sur les champs de saisie est qu'ils ne s'adaptent pas à la couleur d'arrière-plan derrière eux, créant des échecs de contraste. Un contour bleu par défaut peut être invisible contre un arrière-plan de formulaire bleu, ou un contour sombre invisible contre un style de champ sombre. C'est la raison principale pour laquelle les indicateurs de focus par défaut échouent aux exigences d'accessibilité pour les champs de saisie. De plus, les styles par défaut des navigateurs sont incohérents - Chrome utilise un contour bleu, Safari utilise une lueur bleue, Firefox utilise un contour pointillé, et ceux-ci varient selon les systèmes d'exploitation et versions. Les styles par défaut entrent souvent en conflit avec le style personnalisé des champs (arrière-plans, bordures, ombres dans les états normal et focus), devenant invisibles ou créant une confusion visuelle. Certains styles de focus par défaut disparaissent entièrement sur les champs stylisés personnalisés. S'appuyer sur les styles par défaut signifie que vous n'avez aucun contrôle sur la conformité d'accessibilité - votre formulaire pourrait passer les tests dans Chrome sur Windows mais échouer dans Safari sur macOS, ou passer sur un arrière-plan blanc mais échouer sur des sections de formulaire colorées.
Keyboard users who lose track of which input field has focus when the outline blends into the background, users with low vision who cannot see low-contrast default outlines on various input backgrounds, users with color vision deficiencies who may not perceive certain default colors against certain form or input backgrounds, users filling out forms on different browsers and platforms expecting consistent focus indication, and quality assurance teams unable to ensure consistent, contrast-compliant focus indicators across all contexts
Utilisateurs de clavier qui perdent la trace du champ de saisie qui a le focus lorsque le contour se fond dans l'arrière-plan, utilisateurs malvoyants qui ne peuvent pas voir les contours par défaut à faible contraste sur divers arrière-plans de champs, utilisateurs avec des déficiences de vision des couleurs qui peuvent ne pas percevoir certaines couleurs par défaut contre certains arrière-plans de formulaire ou de champ, utilisateurs remplissant des formulaires sur différents navigateurs et plateformes s'attendant à une indication de focus cohérente, et équipes d'assurance qualité incapables d'assurer des indicateurs de focus cohérents et conformes au contraste dans tous les contextes
Touchpoint Forms Formulaires
Impact Medium Moyen
WCAG , WCAG ,
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 2 WCAG 2
WCAG 4 WCAG 4
WCAG 4 WCAG 4
Location
/html[1]/body[1]/main[1]/div[2]/div[1]/div[5]/form[1]/div[3]/div[1]/textarea[1]
<textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid rgb(193, 193, 193); margin: 10px 25px; padding: 0px; r
Heading is hidden with display:none
Le titre est masqué avec display:none
Hidden headings may affect document structure
Les titres masqués peuvent affecter la structure du document
Screen reader users (varies by implementation)
Utilisateurs de lecteurs d'écran (varie selon l'implémentation)
Touchpoint Headings Titres
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[2]/h3[1]
<h3 class="has-h-4-font-size french-only" id="have-a-questions-contact-us"><strong>Vous avez des questions? Contactez nous!</strong></h3>
Heading is hidden with display:none
Le titre est masqué avec display:none
Hidden headings may affect document structure
Les titres masqués peuvent affecter la structure du document
Screen reader users (varies by implementation)
Utilisateurs de lecteurs d'écran (varie selon l'implémentation)
Touchpoint Headings Titres
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[8]/h3[1]
<h3 id="we-are-proud-partners-of" class="has-h-4-font-size french-only"><strong>Nous sommes fiers d'être partenaires de</strong></h3>
Link is styled to look like a button but uses anchor element
Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
Links and buttons have different behaviors - links navigate to new locations while buttons trigger actions. When links look like buttons, users may have incorrect expectations about what will happen. Keyboard users expect Space key to activate buttons but it doesn't work on links.
Les liens et boutons ont des comportements différents - les liens naviguent vers de nouveaux emplacements tandis que les boutons déclenchent des actions. Lorsque les liens ressemblent à des boutons, les utilisateurs peuvent avoir des attentes incorrectes sur ce qui va se passer. Les utilisateurs de clavier s'attendent à ce que la touche Espace active les boutons mais cela ne fonctionne pas sur les liens.
Keyboard users who expect button behavior, screen reader users who hear it announced as a link but see it as a button, and users with cognitive disabilities who rely on consistent interactions
Les utilisateurs de clavier qui s'attendent à un comportement de bouton, les utilisateurs de lecteurs d'écran qui l'entendent annoncé comme un lien mais le voient comme un bouton, et les utilisateurs ayant des déficiences cognitives qui comptent sur des interactions cohérentes
Touchpoint Links Liens
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
Location
//body/a[1]
<a class="skip-link screen-reader-text" href="#headline">Skip to content</a>
Link is styled to look like a button but uses anchor element
Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
Links and buttons have different behaviors - links navigate to new locations while buttons trigger actions. When links look like buttons, users may have incorrect expectations about what will happen. Keyboard users expect Space key to activate buttons but it doesn't work on links.
Les liens et boutons ont des comportements différents - les liens naviguent vers de nouveaux emplacements tandis que les boutons déclenchent des actions. Lorsque les liens ressemblent à des boutons, les utilisateurs peuvent avoir des attentes incorrectes sur ce qui va se passer. Les utilisateurs de clavier s'attendent à ce que la touche Espace active les boutons mais cela ne fonctionne pas sur les liens.
Keyboard users who expect button behavior, screen reader users who hear it announced as a link but see it as a button, and users with cognitive disabilities who rely on consistent interactions
Les utilisateurs de clavier qui s'attendent à un comportement de bouton, les utilisateurs de lecteurs d'écran qui l'entendent annoncé comme un lien mais le voient comme un bouton, et les utilisateurs ayant des déficiences cognitives qui comptent sur des interactions cohérentes
Touchpoint Links Liens
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
Location
//body/header[1]/div[1]/div[1]/div[2]/div[1]/div[1]/div[1]/a[1]
<a href="https://cnib-accesslabs.ca/contact-us/" class="wpml-ls-link">
<span class="wpml-ls-native">English</span></a>
Link is styled to look like a button but uses anchor element
Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
Links and buttons have different behaviors - links navigate to new locations while buttons trigger actions. When links look like buttons, users may have incorrect expectations about what will happen. Keyboard users expect Space key to activate buttons but it doesn't work on links.
Les liens et boutons ont des comportements différents - les liens naviguent vers de nouveaux emplacements tandis que les boutons déclenchent des actions. Lorsque les liens ressemblent à des boutons, les utilisateurs peuvent avoir des attentes incorrectes sur ce qui va se passer. Les utilisateurs de clavier s'attendent à ce que la touche Espace active les boutons mais cela ne fonctionne pas sur les liens.
Keyboard users who expect button behavior, screen reader users who hear it announced as a link but see it as a button, and users with cognitive disabilities who rely on consistent interactions
Les utilisateurs de clavier qui s'attendent à un comportement de bouton, les utilisateurs de lecteurs d'écran qui l'entendent annoncé comme un lien mais le voient comme un bouton, et les utilisateurs ayant des déficiences cognitives qui comptent sur des interactions cohérentes
Touchpoint Links Liens
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
Location
//body/header[1]/div[1]/div[1]/div[2]/div[1]/div[1]/div[2]/a[1]
<a href="https://cnib-accesslabs.ca/fr/contactez-nous/" class="wpml-ls-link">
<span class="wpml-ls-native" lang="fr">Français</span><span class="wpml-ls-display"><span class="wpml-
Link is styled to look like a button but uses anchor element
Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
Links and buttons have different behaviors - links navigate to new locations while buttons trigger actions. When links look like buttons, users may have incorrect expectations about what will happen. Keyboard users expect Space key to activate buttons but it doesn't work on links.
Les liens et boutons ont des comportements différents - les liens naviguent vers de nouveaux emplacements tandis que les boutons déclenchent des actions. Lorsque les liens ressemblent à des boutons, les utilisateurs peuvent avoir des attentes incorrectes sur ce qui va se passer. Les utilisateurs de clavier s'attendent à ce que la touche Espace active les boutons mais cela ne fonctionne pas sur les liens.
Keyboard users who expect button behavior, screen reader users who hear it announced as a link but see it as a button, and users with cognitive disabilities who rely on consistent interactions
Les utilisateurs de clavier qui s'attendent à un comportement de bouton, les utilisateurs de lecteurs d'écran qui l'entendent annoncé comme un lien mais le voient comme un bouton, et les utilisateurs ayant des déficiences cognitives qui comptent sur des interactions cohérentes
Touchpoint Links Liens
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
Location
//li[@id="menu-item-3805"]/a[1]
<a href="https://cnib-accesslabs.ca/about-us/">About Us</a>
Link is styled to look like a button but uses anchor element
Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
Links and buttons have different behaviors - links navigate to new locations while buttons trigger actions. When links look like buttons, users may have incorrect expectations about what will happen. Keyboard users expect Space key to activate buttons but it doesn't work on links.
Les liens et boutons ont des comportements différents - les liens naviguent vers de nouveaux emplacements tandis que les boutons déclenchent des actions. Lorsque les liens ressemblent à des boutons, les utilisateurs peuvent avoir des attentes incorrectes sur ce qui va se passer. Les utilisateurs de clavier s'attendent à ce que la touche Espace active les boutons mais cela ne fonctionne pas sur les liens.
Keyboard users who expect button behavior, screen reader users who hear it announced as a link but see it as a button, and users with cognitive disabilities who rely on consistent interactions
Les utilisateurs de clavier qui s'attendent à un comportement de bouton, les utilisateurs de lecteurs d'écran qui l'entendent annoncé comme un lien mais le voient comme un bouton, et les utilisateurs ayant des déficiences cognitives qui comptent sur des interactions cohérentes
Touchpoint Links Liens
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
Location
//li[@id="menu-item-3806"]/a[1]
<a href="https://cnib-accesslabs.ca/become-a-tester/">Become a Tester</a>
Link is styled to look like a button but uses anchor element
Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
Links and buttons have different behaviors - links navigate to new locations while buttons trigger actions. When links look like buttons, users may have incorrect expectations about what will happen. Keyboard users expect Space key to activate buttons but it doesn't work on links.
Les liens et boutons ont des comportements différents - les liens naviguent vers de nouveaux emplacements tandis que les boutons déclenchent des actions. Lorsque les liens ressemblent à des boutons, les utilisateurs peuvent avoir des attentes incorrectes sur ce qui va se passer. Les utilisateurs de clavier s'attendent à ce que la touche Espace active les boutons mais cela ne fonctionne pas sur les liens.
Keyboard users who expect button behavior, screen reader users who hear it announced as a link but see it as a button, and users with cognitive disabilities who rely on consistent interactions
Les utilisateurs de clavier qui s'attendent à un comportement de bouton, les utilisateurs de lecteurs d'écran qui l'entendent annoncé comme un lien mais le voient comme un bouton, et les utilisateurs ayant des déficiences cognitives qui comptent sur des interactions cohérentes
Touchpoint Links Liens
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
Location
//li[@id="menu-item-6054"]/a[1]
<a href="https://cnib-accesslabs.ca/inclusive-cx-2/">Inclusive CX</a>
Link is styled to look like a button but uses anchor element
Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
Links and buttons have different behaviors - links navigate to new locations while buttons trigger actions. When links look like buttons, users may have incorrect expectations about what will happen. Keyboard users expect Space key to activate buttons but it doesn't work on links.
Les liens et boutons ont des comportements différents - les liens naviguent vers de nouveaux emplacements tandis que les boutons déclenchent des actions. Lorsque les liens ressemblent à des boutons, les utilisateurs peuvent avoir des attentes incorrectes sur ce qui va se passer. Les utilisateurs de clavier s'attendent à ce que la touche Espace active les boutons mais cela ne fonctionne pas sur les liens.
Keyboard users who expect button behavior, screen reader users who hear it announced as a link but see it as a button, and users with cognitive disabilities who rely on consistent interactions
Les utilisateurs de clavier qui s'attendent à un comportement de bouton, les utilisateurs de lecteurs d'écran qui l'entendent annoncé comme un lien mais le voient comme un bouton, et les utilisateurs ayant des déficiences cognitives qui comptent sur des interactions cohérentes
Touchpoint Links Liens
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
Location
//li[@id="menu-item-3809"]/a[1]
<a href="https://cnib-accesslabs.ca/news/">News</a>
Link is styled to look like a button but uses anchor element
Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
Links and buttons have different behaviors - links navigate to new locations while buttons trigger actions. When links look like buttons, users may have incorrect expectations about what will happen. Keyboard users expect Space key to activate buttons but it doesn't work on links.
Les liens et boutons ont des comportements différents - les liens naviguent vers de nouveaux emplacements tandis que les boutons déclenchent des actions. Lorsque les liens ressemblent à des boutons, les utilisateurs peuvent avoir des attentes incorrectes sur ce qui va se passer. Les utilisateurs de clavier s'attendent à ce que la touche Espace active les boutons mais cela ne fonctionne pas sur les liens.
Keyboard users who expect button behavior, screen reader users who hear it announced as a link but see it as a button, and users with cognitive disabilities who rely on consistent interactions
Les utilisateurs de clavier qui s'attendent à un comportement de bouton, les utilisateurs de lecteurs d'écran qui l'entendent annoncé comme un lien mais le voient comme un bouton, et les utilisateurs ayant des déficiences cognitives qui comptent sur des interactions cohérentes
Touchpoint Links Liens
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
Location
//li[@id="menu-item-3810"]/a[1]
<a href="https://cnib-accesslabs.ca/contact-us/" aria-current="page">Contact Us</a>
Link is styled to look like a button but uses anchor element
Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
Links and buttons have different behaviors - links navigate to new locations while buttons trigger actions. When links look like buttons, users may have incorrect expectations about what will happen. Keyboard users expect Space key to activate buttons but it doesn't work on links.
Les liens et boutons ont des comportements différents - les liens naviguent vers de nouveaux emplacements tandis que les boutons déclenchent des actions. Lorsque les liens ressemblent à des boutons, les utilisateurs peuvent avoir des attentes incorrectes sur ce qui va se passer. Les utilisateurs de clavier s'attendent à ce que la touche Espace active les boutons mais cela ne fonctionne pas sur les liens.
Keyboard users who expect button behavior, screen reader users who hear it announced as a link but see it as a button, and users with cognitive disabilities who rely on consistent interactions
Les utilisateurs de clavier qui s'attendent à un comportement de bouton, les utilisateurs de lecteurs d'écran qui l'entendent annoncé comme un lien mais le voient comme un bouton, et les utilisateurs ayant des déficiences cognitives qui comptent sur des interactions cohérentes
Touchpoint Links Liens
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
Location
//ul[@id="menu-main-menu-1"]/li[1]/ul[1]/li[1]/a[1]
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/">Inclusive Built Environment Overview</a>
Link is styled to look like a button but uses anchor element
Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
Links and buttons have different behaviors - links navigate to new locations while buttons trigger actions. When links look like buttons, users may have incorrect expectations about what will happen. Keyboard users expect Space key to activate buttons but it doesn't work on links.
Les liens et boutons ont des comportements différents - les liens naviguent vers de nouveaux emplacements tandis que les boutons déclenchent des actions. Lorsque les liens ressemblent à des boutons, les utilisateurs peuvent avoir des attentes incorrectes sur ce qui va se passer. Les utilisateurs de clavier s'attendent à ce que la touche Espace active les boutons mais cela ne fonctionne pas sur les liens.
Keyboard users who expect button behavior, screen reader users who hear it announced as a link but see it as a button, and users with cognitive disabilities who rely on consistent interactions
Les utilisateurs de clavier qui s'attendent à un comportement de bouton, les utilisateurs de lecteurs d'écran qui l'entendent annoncé comme un lien mais le voient comme un bouton, et les utilisateurs ayant des déficiences cognitives qui comptent sur des interactions cohérentes
Touchpoint Links Liens
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
Location
//ul[@id="menu-main-menu-1"]/li[1]/ul[1]/li[2]/a[1]
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/lived-experience-accessibility-testing/">Lived Experience Accessibility Testing</a>
Link is styled to look like a button but uses anchor element
Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
Links and buttons have different behaviors - links navigate to new locations while buttons trigger actions. When links look like buttons, users may have incorrect expectations about what will happen. Keyboard users expect Space key to activate buttons but it doesn't work on links.
Les liens et boutons ont des comportements différents - les liens naviguent vers de nouveaux emplacements tandis que les boutons déclenchent des actions. Lorsque les liens ressemblent à des boutons, les utilisateurs peuvent avoir des attentes incorrectes sur ce qui va se passer. Les utilisateurs de clavier s'attendent à ce que la touche Espace active les boutons mais cela ne fonctionne pas sur les liens.
Keyboard users who expect button behavior, screen reader users who hear it announced as a link but see it as a button, and users with cognitive disabilities who rely on consistent interactions
Les utilisateurs de clavier qui s'attendent à un comportement de bouton, les utilisateurs de lecteurs d'écran qui l'entendent annoncé comme un lien mais le voient comme un bouton, et les utilisateurs ayant des déficiences cognitives qui comptent sur des interactions cohérentes
Touchpoint Links Liens
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
Location
//ul[@id="menu-main-menu-1"]/li[1]/ul[1]/li[3]/a[1]
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/navigation-wayfinding/">Navigation & Wayfinding</a>
Link is styled to look like a button but uses anchor element
Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
Links and buttons have different behaviors - links navigate to new locations while buttons trigger actions. When links look like buttons, users may have incorrect expectations about what will happen. Keyboard users expect Space key to activate buttons but it doesn't work on links.
Les liens et boutons ont des comportements différents - les liens naviguent vers de nouveaux emplacements tandis que les boutons déclenchent des actions. Lorsque les liens ressemblent à des boutons, les utilisateurs peuvent avoir des attentes incorrectes sur ce qui va se passer. Les utilisateurs de clavier s'attendent à ce que la touche Espace active les boutons mais cela ne fonctionne pas sur les liens.
Keyboard users who expect button behavior, screen reader users who hear it announced as a link but see it as a button, and users with cognitive disabilities who rely on consistent interactions
Les utilisateurs de clavier qui s'attendent à un comportement de bouton, les utilisateurs de lecteurs d'écran qui l'entendent annoncé comme un lien mais le voient comme un bouton, et les utilisateurs ayant des déficiences cognitives qui comptent sur des interactions cohérentes
Touchpoint Links Liens
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
Location
//ul[@id="menu-main-menu-1"]/li[1]/ul[1]/li[4]/a[1]
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/accessible-signage/">Accessible Signage</a>
Link is styled to look like a button but uses anchor element
Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
Links and buttons have different behaviors - links navigate to new locations while buttons trigger actions. When links look like buttons, users may have incorrect expectations about what will happen. Keyboard users expect Space key to activate buttons but it doesn't work on links.
Les liens et boutons ont des comportements différents - les liens naviguent vers de nouveaux emplacements tandis que les boutons déclenchent des actions. Lorsque les liens ressemblent à des boutons, les utilisateurs peuvent avoir des attentes incorrectes sur ce qui va se passer. Les utilisateurs de clavier s'attendent à ce que la touche Espace active les boutons mais cela ne fonctionne pas sur les liens.
Keyboard users who expect button behavior, screen reader users who hear it announced as a link but see it as a button, and users with cognitive disabilities who rely on consistent interactions
Les utilisateurs de clavier qui s'attendent à un comportement de bouton, les utilisateurs de lecteurs d'écran qui l'entendent annoncé comme un lien mais le voient comme un bouton, et les utilisateurs ayant des déficiences cognitives qui comptent sur des interactions cohérentes
Touchpoint Links Liens
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
Location
//ul[@id="menu-main-menu-1"]/li[1]/ul[1]/li[5]/a[1]
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/communication-materials/">Communication Materials</a>
Link is styled to look like a button but uses anchor element
Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
Links and buttons have different behaviors - links navigate to new locations while buttons trigger actions. When links look like buttons, users may have incorrect expectations about what will happen. Keyboard users expect Space key to activate buttons but it doesn't work on links.
Les liens et boutons ont des comportements différents - les liens naviguent vers de nouveaux emplacements tandis que les boutons déclenchent des actions. Lorsque les liens ressemblent à des boutons, les utilisateurs peuvent avoir des attentes incorrectes sur ce qui va se passer. Les utilisateurs de clavier s'attendent à ce que la touche Espace active les boutons mais cela ne fonctionne pas sur les liens.
Keyboard users who expect button behavior, screen reader users who hear it announced as a link but see it as a button, and users with cognitive disabilities who rely on consistent interactions
Les utilisateurs de clavier qui s'attendent à un comportement de bouton, les utilisateurs de lecteurs d'écran qui l'entendent annoncé comme un lien mais le voient comme un bouton, et les utilisateurs ayant des déficiences cognitives qui comptent sur des interactions cohérentes
Touchpoint Links Liens
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
Location
//ul[@id="menu-main-menu-1"]/li[1]/ul[1]/li[6]/a[1]
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/workplace-assessment/">Workplace Assessment</a>
Link is styled to look like a button but uses anchor element
Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
Links and buttons have different behaviors - links navigate to new locations while buttons trigger actions. When links look like buttons, users may have incorrect expectations about what will happen. Keyboard users expect Space key to activate buttons but it doesn't work on links.
Les liens et boutons ont des comportements différents - les liens naviguent vers de nouveaux emplacements tandis que les boutons déclenchent des actions. Lorsque les liens ressemblent à des boutons, les utilisateurs peuvent avoir des attentes incorrectes sur ce qui va se passer. Les utilisateurs de clavier s'attendent à ce que la touche Espace active les boutons mais cela ne fonctionne pas sur les liens.
Keyboard users who expect button behavior, screen reader users who hear it announced as a link but see it as a button, and users with cognitive disabilities who rely on consistent interactions
Les utilisateurs de clavier qui s'attendent à un comportement de bouton, les utilisateurs de lecteurs d'écran qui l'entendent annoncé comme un lien mais le voient comme un bouton, et les utilisateurs ayant des déficiences cognitives qui comptent sur des interactions cohérentes
Touchpoint Links Liens
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
Location
//ul[@id="menu-main-menu-1"]/li[1]/ul[1]/li[7]/a[1]
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/research-planning/">Research & Planning</a>
Link is styled to look like a button but uses anchor element
Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
Links and buttons have different behaviors - links navigate to new locations while buttons trigger actions. When links look like buttons, users may have incorrect expectations about what will happen. Keyboard users expect Space key to activate buttons but it doesn't work on links.
Les liens et boutons ont des comportements différents - les liens naviguent vers de nouveaux emplacements tandis que les boutons déclenchent des actions. Lorsque les liens ressemblent à des boutons, les utilisateurs peuvent avoir des attentes incorrectes sur ce qui va se passer. Les utilisateurs de clavier s'attendent à ce que la touche Espace active les boutons mais cela ne fonctionne pas sur les liens.
Keyboard users who expect button behavior, screen reader users who hear it announced as a link but see it as a button, and users with cognitive disabilities who rely on consistent interactions
Les utilisateurs de clavier qui s'attendent à un comportement de bouton, les utilisateurs de lecteurs d'écran qui l'entendent annoncé comme un lien mais le voient comme un bouton, et les utilisateurs ayant des déficiences cognitives qui comptent sur des interactions cohérentes
Touchpoint Links Liens
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
Location
//ul[@id="menu-main-menu-1"]/li[1]/ul[1]/li[8]/a[1]
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/be-my-eyes/">Be My Eyes</a>
Link is styled to look like a button but uses anchor element
Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
Links and buttons have different behaviors - links navigate to new locations while buttons trigger actions. When links look like buttons, users may have incorrect expectations about what will happen. Keyboard users expect Space key to activate buttons but it doesn't work on links.
Les liens et boutons ont des comportements différents - les liens naviguent vers de nouveaux emplacements tandis que les boutons déclenchent des actions. Lorsque les liens ressemblent à des boutons, les utilisateurs peuvent avoir des attentes incorrectes sur ce qui va se passer. Les utilisateurs de clavier s'attendent à ce que la touche Espace active les boutons mais cela ne fonctionne pas sur les liens.
Keyboard users who expect button behavior, screen reader users who hear it announced as a link but see it as a button, and users with cognitive disabilities who rely on consistent interactions
Les utilisateurs de clavier qui s'attendent à un comportement de bouton, les utilisateurs de lecteurs d'écran qui l'entendent annoncé comme un lien mais le voient comme un bouton, et les utilisateurs ayant des déficiences cognitives qui comptent sur des interactions cohérentes
Touchpoint Links Liens
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
Location
//ul[@id="menu-main-menu-1"]/li[2]/ul[1]/li[1]/a[1]
<a href="https://cnib-accesslabs.ca/inclusive-digital-design-testing/">Inclusive Digital Design & Testing Overview</a>
Link is styled to look like a button but uses anchor element
Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
Links and buttons have different behaviors - links navigate to new locations while buttons trigger actions. When links look like buttons, users may have incorrect expectations about what will happen. Keyboard users expect Space key to activate buttons but it doesn't work on links.
Les liens et boutons ont des comportements différents - les liens naviguent vers de nouveaux emplacements tandis que les boutons déclenchent des actions. Lorsque les liens ressemblent à des boutons, les utilisateurs peuvent avoir des attentes incorrectes sur ce qui va se passer. Les utilisateurs de clavier s'attendent à ce que la touche Espace active les boutons mais cela ne fonctionne pas sur les liens.
Keyboard users who expect button behavior, screen reader users who hear it announced as a link but see it as a button, and users with cognitive disabilities who rely on consistent interactions
Les utilisateurs de clavier qui s'attendent à un comportement de bouton, les utilisateurs de lecteurs d'écran qui l'entendent annoncé comme un lien mais le voient comme un bouton, et les utilisateurs ayant des déficiences cognitives qui comptent sur des interactions cohérentes
Touchpoint Links Liens
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
Location
//ul[@id="menu-main-menu-1"]/li[2]/ul[1]/li[2]/a[1]
<a href="https://cnib-accesslabs.ca/inclusive-digital-design-testing/lived-user-accessibility-testing/">Lived Experience Accessibility Testing</a>
Link is styled to look like a button but uses anchor element
Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
Links and buttons have different behaviors - links navigate to new locations while buttons trigger actions. When links look like buttons, users may have incorrect expectations about what will happen. Keyboard users expect Space key to activate buttons but it doesn't work on links.
Les liens et boutons ont des comportements différents - les liens naviguent vers de nouveaux emplacements tandis que les boutons déclenchent des actions. Lorsque les liens ressemblent à des boutons, les utilisateurs peuvent avoir des attentes incorrectes sur ce qui va se passer. Les utilisateurs de clavier s'attendent à ce que la touche Espace active les boutons mais cela ne fonctionne pas sur les liens.
Keyboard users who expect button behavior, screen reader users who hear it announced as a link but see it as a button, and users with cognitive disabilities who rely on consistent interactions
Les utilisateurs de clavier qui s'attendent à un comportement de bouton, les utilisateurs de lecteurs d'écran qui l'entendent annoncé comme un lien mais le voient comme un bouton, et les utilisateurs ayant des déficiences cognitives qui comptent sur des interactions cohérentes
Touchpoint Links Liens
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
Location
//ul[@id="menu-main-menu-1"]/li[2]/ul[1]/li[3]/a[1]
<a href="https://cnib-accesslabs.ca/inclusive-digital-design-testing/digital-services/">Digital Services</a>
Link is styled to look like a button but uses anchor element
Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
Links and buttons have different behaviors - links navigate to new locations while buttons trigger actions. When links look like buttons, users may have incorrect expectations about what will happen. Keyboard users expect Space key to activate buttons but it doesn't work on links.
Les liens et boutons ont des comportements différents - les liens naviguent vers de nouveaux emplacements tandis que les boutons déclenchent des actions. Lorsque les liens ressemblent à des boutons, les utilisateurs peuvent avoir des attentes incorrectes sur ce qui va se passer. Les utilisateurs de clavier s'attendent à ce que la touche Espace active les boutons mais cela ne fonctionne pas sur les liens.
Keyboard users who expect button behavior, screen reader users who hear it announced as a link but see it as a button, and users with cognitive disabilities who rely on consistent interactions
Les utilisateurs de clavier qui s'attendent à un comportement de bouton, les utilisateurs de lecteurs d'écran qui l'entendent annoncé comme un lien mais le voient comme un bouton, et les utilisateurs ayant des déficiences cognitives qui comptent sur des interactions cohérentes
Touchpoint Links Liens
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
Location
//ul[@id="menu-main-menu-1"]/li[2]/ul[1]/li[4]/a[1]
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/digital-design-testing/">Digital Design & Testing</a>
Link is styled to look like a button but uses anchor element
Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
Links and buttons have different behaviors - links navigate to new locations while buttons trigger actions. When links look like buttons, users may have incorrect expectations about what will happen. Keyboard users expect Space key to activate buttons but it doesn't work on links.
Les liens et boutons ont des comportements différents - les liens naviguent vers de nouveaux emplacements tandis que les boutons déclenchent des actions. Lorsque les liens ressemblent à des boutons, les utilisateurs peuvent avoir des attentes incorrectes sur ce qui va se passer. Les utilisateurs de clavier s'attendent à ce que la touche Espace active les boutons mais cela ne fonctionne pas sur les liens.
Keyboard users who expect button behavior, screen reader users who hear it announced as a link but see it as a button, and users with cognitive disabilities who rely on consistent interactions
Les utilisateurs de clavier qui s'attendent à un comportement de bouton, les utilisateurs de lecteurs d'écran qui l'entendent annoncé comme un lien mais le voient comme un bouton, et les utilisateurs ayant des déficiences cognitives qui comptent sur des interactions cohérentes
Touchpoint Links Liens
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
Location
//ul[@id="menu-main-menu-1"]/li[3]/a[1]
<a href="https://cnib-accesslabs.ca/about-us/">About Us</a>
Link is styled to look like a button but uses anchor element
Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
Links and buttons have different behaviors - links navigate to new locations while buttons trigger actions. When links look like buttons, users may have incorrect expectations about what will happen. Keyboard users expect Space key to activate buttons but it doesn't work on links.
Les liens et boutons ont des comportements différents - les liens naviguent vers de nouveaux emplacements tandis que les boutons déclenchent des actions. Lorsque les liens ressemblent à des boutons, les utilisateurs peuvent avoir des attentes incorrectes sur ce qui va se passer. Les utilisateurs de clavier s'attendent à ce que la touche Espace active les boutons mais cela ne fonctionne pas sur les liens.
Keyboard users who expect button behavior, screen reader users who hear it announced as a link but see it as a button, and users with cognitive disabilities who rely on consistent interactions
Les utilisateurs de clavier qui s'attendent à un comportement de bouton, les utilisateurs de lecteurs d'écran qui l'entendent annoncé comme un lien mais le voient comme un bouton, et les utilisateurs ayant des déficiences cognitives qui comptent sur des interactions cohérentes
Touchpoint Links Liens
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
Location
//ul[@id="menu-main-menu-1"]/li[4]/a[1]
<a href="https://cnib-accesslabs.ca/become-a-tester/">Become a Tester</a>
Link is styled to look like a button but uses anchor element
Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
Links and buttons have different behaviors - links navigate to new locations while buttons trigger actions. When links look like buttons, users may have incorrect expectations about what will happen. Keyboard users expect Space key to activate buttons but it doesn't work on links.
Les liens et boutons ont des comportements différents - les liens naviguent vers de nouveaux emplacements tandis que les boutons déclenchent des actions. Lorsque les liens ressemblent à des boutons, les utilisateurs peuvent avoir des attentes incorrectes sur ce qui va se passer. Les utilisateurs de clavier s'attendent à ce que la touche Espace active les boutons mais cela ne fonctionne pas sur les liens.
Keyboard users who expect button behavior, screen reader users who hear it announced as a link but see it as a button, and users with cognitive disabilities who rely on consistent interactions
Les utilisateurs de clavier qui s'attendent à un comportement de bouton, les utilisateurs de lecteurs d'écran qui l'entendent annoncé comme un lien mais le voient comme un bouton, et les utilisateurs ayant des déficiences cognitives qui comptent sur des interactions cohérentes
Touchpoint Links Liens
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
Location
//ul[@id="menu-main-menu-1"]/li[5]/a[1]
<a href="https://cnib-accesslabs.ca/inclusive-cx-2/">Inclusive CX</a>
Link is styled to look like a button but uses anchor element
Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
Links and buttons have different behaviors - links navigate to new locations while buttons trigger actions. When links look like buttons, users may have incorrect expectations about what will happen. Keyboard users expect Space key to activate buttons but it doesn't work on links.
Les liens et boutons ont des comportements différents - les liens naviguent vers de nouveaux emplacements tandis que les boutons déclenchent des actions. Lorsque les liens ressemblent à des boutons, les utilisateurs peuvent avoir des attentes incorrectes sur ce qui va se passer. Les utilisateurs de clavier s'attendent à ce que la touche Espace active les boutons mais cela ne fonctionne pas sur les liens.
Keyboard users who expect button behavior, screen reader users who hear it announced as a link but see it as a button, and users with cognitive disabilities who rely on consistent interactions
Les utilisateurs de clavier qui s'attendent à un comportement de bouton, les utilisateurs de lecteurs d'écran qui l'entendent annoncé comme un lien mais le voient comme un bouton, et les utilisateurs ayant des déficiences cognitives qui comptent sur des interactions cohérentes
Touchpoint Links Liens
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
Location
//ul[@id="menu-main-menu-1"]/li[6]/a[1]
<a href="https://cnib-accesslabs.ca/news/">News</a>
Link is styled to look like a button but uses anchor element
Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
Links and buttons have different behaviors - links navigate to new locations while buttons trigger actions. When links look like buttons, users may have incorrect expectations about what will happen. Keyboard users expect Space key to activate buttons but it doesn't work on links.
Les liens et boutons ont des comportements différents - les liens naviguent vers de nouveaux emplacements tandis que les boutons déclenchent des actions. Lorsque les liens ressemblent à des boutons, les utilisateurs peuvent avoir des attentes incorrectes sur ce qui va se passer. Les utilisateurs de clavier s'attendent à ce que la touche Espace active les boutons mais cela ne fonctionne pas sur les liens.
Keyboard users who expect button behavior, screen reader users who hear it announced as a link but see it as a button, and users with cognitive disabilities who rely on consistent interactions
Les utilisateurs de clavier qui s'attendent à un comportement de bouton, les utilisateurs de lecteurs d'écran qui l'entendent annoncé comme un lien mais le voient comme un bouton, et les utilisateurs ayant des déficiences cognitives qui comptent sur des interactions cohérentes
Touchpoint Links Liens
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
Location
//ul[@id="menu-main-menu-1"]/li[7]/a[1]
<a href="https://cnib-accesslabs.ca/contact-us/" aria-current="page">Contact Us</a>
Link is styled to look like a button but uses anchor element
Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
Links and buttons have different behaviors - links navigate to new locations while buttons trigger actions. When links look like buttons, users may have incorrect expectations about what will happen. Keyboard users expect Space key to activate buttons but it doesn't work on links.
Les liens et boutons ont des comportements différents - les liens naviguent vers de nouveaux emplacements tandis que les boutons déclenchent des actions. Lorsque les liens ressemblent à des boutons, les utilisateurs peuvent avoir des attentes incorrectes sur ce qui va se passer. Les utilisateurs de clavier s'attendent à ce que la touche Espace active les boutons mais cela ne fonctionne pas sur les liens.
Keyboard users who expect button behavior, screen reader users who hear it announced as a link but see it as a button, and users with cognitive disabilities who rely on consistent interactions
Les utilisateurs de clavier qui s'attendent à un comportement de bouton, les utilisateurs de lecteurs d'écran qui l'entendent annoncé comme un lien mais le voient comme un bouton, et les utilisateurs ayant des déficiences cognitives qui comptent sur des interactions cohérentes
Touchpoint Links Liens
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
Location
//body/footer[1]/div[1]/div[1]/div[3]/div[1]/div[1]/a[1]
<a class="wp-block-button__link wp-element-button" href="https://cnib-accesslabs.ca/subscribe/">Subscribe</a>
List item uses %(customType)s for bullets instead of standard list-style-type. Details: %(customDetails)s
L'élément de liste utilise %(customType)s pour les puces au lieu du list-style-type standard. Détails : %(customDetails)s
Custom bullets using CSS ::before pseudo-elements, background images, or embedded images may not be announced correctly by screen readers. While the list structure is preserved, custom visual bullets might not provide the same semantic cues or be available to assistive technologies. This can reduce the clarity of list navigation for screen reader users.
Les puces personnalisées utilisant des pseudo-éléments CSS ::before, des images d'arrière-plan ou des images intégrées peuvent ne pas être annoncées correctement par les lecteurs d'écran. Bien que la structure de liste soit préservée, les puces visuelles personnalisées pourraient ne pas fournir les mêmes indices sémantiques ou être disponibles pour les technologies d'assistance. Cela peut réduire la clarté de la navigation de liste pour les utilisateurs de lecteurs d'écran.
Screen reader users who may miss visual bullet cues, users with custom stylesheets who override author styles, users relying on list semantics for navigation.
Utilisateurs de lecteurs d'écran qui peuvent manquer les indices visuels des puces, utilisateurs avec des feuilles de style personnalisées qui remplacent les styles de l'auteur, utilisateurs s'appuyant sur la sémantique de liste pour la navigation.
Touchpoint Lists Listes
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[11]/ul[1]/li[1]
<li><img decoding="async" width="25%" class="wp-image-4858" style="float:left;margin:0;" src="https://cnib-accesslabs.ca/wp-content/uploads/2023/09/CNIB_ONLY_Wht_FRE_.png" alt="INCA"></li>
List item uses %(customType)s for bullets instead of standard list-style-type. Details: %(customDetails)s
L'élément de liste utilise %(customType)s pour les puces au lieu du list-style-type standard. Détails : %(customDetails)s
Custom bullets using CSS ::before pseudo-elements, background images, or embedded images may not be announced correctly by screen readers. While the list structure is preserved, custom visual bullets might not provide the same semantic cues or be available to assistive technologies. This can reduce the clarity of list navigation for screen reader users.
Les puces personnalisées utilisant des pseudo-éléments CSS ::before, des images d'arrière-plan ou des images intégrées peuvent ne pas être annoncées correctement par les lecteurs d'écran. Bien que la structure de liste soit préservée, les puces visuelles personnalisées pourraient ne pas fournir les mêmes indices sémantiques ou être disponibles pour les technologies d'assistance. Cela peut réduire la clarté de la navigation de liste pour les utilisateurs de lecteurs d'écran.
Screen reader users who may miss visual bullet cues, users with custom stylesheets who override author styles, users relying on list semantics for navigation.
Utilisateurs de lecteurs d'écran qui peuvent manquer les indices visuels des puces, utilisateurs avec des feuilles de style personnalisées qui remplacent les styles de l'auteur, utilisateurs s'appuyant sur la sémantique de liste pour la navigation.
Touchpoint Lists Listes
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[11]/ul[1]/li[2]
<li><img decoding="async" width="25%" class="wp-image-4866" style="float:left;margin:0;" src="https://cnib-accesslabs.ca/wp-content/uploads/2023/09/VLR_Canada_FR_withMC.png" alt="Readaptation En Defic
List item uses %(customType)s for bullets instead of standard list-style-type. Details: %(customDetails)s
L'élément de liste utilise %(customType)s pour les puces au lieu du list-style-type standard. Détails : %(customDetails)s
Custom bullets using CSS ::before pseudo-elements, background images, or embedded images may not be announced correctly by screen readers. While the list structure is preserved, custom visual bullets might not provide the same semantic cues or be available to assistive technologies. This can reduce the clarity of list navigation for screen reader users.
Les puces personnalisées utilisant des pseudo-éléments CSS ::before, des images d'arrière-plan ou des images intégrées peuvent ne pas être annoncées correctement par les lecteurs d'écran. Bien que la structure de liste soit préservée, les puces visuelles personnalisées pourraient ne pas fournir les mêmes indices sémantiques ou être disponibles pour les technologies d'assistance. Cela peut réduire la clarté de la navigation de liste pour les utilisateurs de lecteurs d'écran.
Screen reader users who may miss visual bullet cues, users with custom stylesheets who override author styles, users relying on list semantics for navigation.
Utilisateurs de lecteurs d'écran qui peuvent manquer les indices visuels des puces, utilisateurs avec des feuilles de style personnalisées qui remplacent les styles de l'auteur, utilisateurs s'appuyant sur la sémantique de liste pour la navigation.
Touchpoint Lists Listes
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[11]/ul[1]/li[3]
<li><img decoding="async" width="25%" class="wp-image-4860" style="float:left;margin:0;" src="https://cnib-accesslabs.ca/wp-content/uploads/2023/09/CNIB_Deafblind_FR.png" alt="Services Communautaires
List item uses %(customType)s for bullets instead of standard list-style-type. Details: %(customDetails)s
L'élément de liste utilise %(customType)s pour les puces au lieu du list-style-type standard. Détails : %(customDetails)s
Custom bullets using CSS ::before pseudo-elements, background images, or embedded images may not be announced correctly by screen readers. While the list structure is preserved, custom visual bullets might not provide the same semantic cues or be available to assistive technologies. This can reduce the clarity of list navigation for screen reader users.
Les puces personnalisées utilisant des pseudo-éléments CSS ::before, des images d'arrière-plan ou des images intégrées peuvent ne pas être annoncées correctement par les lecteurs d'écran. Bien que la structure de liste soit préservée, les puces visuelles personnalisées pourraient ne pas fournir les mêmes indices sémantiques ou être disponibles pour les technologies d'assistance. Cela peut réduire la clarté de la navigation de liste pour les utilisateurs de lecteurs d'écran.
Screen reader users who may miss visual bullet cues, users with custom stylesheets who override author styles, users relying on list semantics for navigation.
Utilisateurs de lecteurs d'écran qui peuvent manquer les indices visuels des puces, utilisateurs avec des feuilles de style personnalisées qui remplacent les styles de l'auteur, utilisateurs s'appuyant sur la sémantique de liste pour la navigation.
Touchpoint Lists Listes
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[11]/ul[1]/li[4]
<li><img decoding="async" width="25%" class="wp-image-4854" style="float:left;margin:0;" src="https://cnib-accesslabs.ca/wp-content/uploads/2023/09/CNIB-Foundation_Guide-Dogs_Logo_White_FRE.png" alt="
Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes
Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
While layout-related inline styles are less problematic for accessibility than color/font styles, they still reduce maintainability, make responsive design harder to implement, and can interfere with user zoom and customization. Inline layout styles scatter presentation logic throughout HTML making it difficult to create consistent designs or implement site-wide changes. They also make it harder for users with custom stylesheets to adjust spacing or layout for their needs.
Bien que les styles en ligne liés à la mise en page soient moins problématiques pour l'accessibilité que les styles de couleur/police, ils réduisent encore la maintenabilité, rendent la conception responsive plus difficile à implémenter et peuvent interférer avec le zoom utilisateur et la personnalisation. Les styles de mise en page en ligne dispersent la logique de présentation dans tout le HTML, rendant difficile la création de conceptions cohérentes ou l'implémentation de changements à l'échelle du site. Ils rendent également plus difficile pour les utilisateurs avec des feuilles de style personnalisées d'ajuster l'espacement ou la mise en page selon leurs besoins.
Users who need custom stylesheets to adjust layout for readability, users who zoom content and need flexible layouts that adapt properly, developers maintaining the codebase who cannot easily update or debug scattered inline styles, and users with cognitive disabilities who benefit from consistent, predictable layouts
Utilisateurs qui ont besoin de feuilles de style personnalisées pour ajuster la mise en page pour la lisibilité, utilisateurs qui zooment le contenu et ont besoin de mises en page flexibles qui s'adaptent correctement, développeurs maintenant la base de code qui ne peuvent pas facilement mettre à jour ou déboguer les styles en ligne dispersés, et utilisateurs avec des troubles cognitifs qui bénéficient de mises en page cohérentes et prévisibles
Touchpoint Styles Styles
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 4 WCAG 4
Location
/html[1]/body[1]/main[1]/div[2]/div[1]/p[1]
<p style="padding-bottom:var(--wp--preset--spacing--50)">If you’re interested in learning more about CNIB Access Labs or would like to request our services, contact us.</p>
Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes
Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
While layout-related inline styles are less problematic for accessibility than color/font styles, they still reduce maintainability, make responsive design harder to implement, and can interfere with user zoom and customization. Inline layout styles scatter presentation logic throughout HTML making it difficult to create consistent designs or implement site-wide changes. They also make it harder for users with custom stylesheets to adjust spacing or layout for their needs.
Bien que les styles en ligne liés à la mise en page soient moins problématiques pour l'accessibilité que les styles de couleur/police, ils réduisent encore la maintenabilité, rendent la conception responsive plus difficile à implémenter et peuvent interférer avec le zoom utilisateur et la personnalisation. Les styles de mise en page en ligne dispersent la logique de présentation dans tout le HTML, rendant difficile la création de conceptions cohérentes ou l'implémentation de changements à l'échelle du site. Ils rendent également plus difficile pour les utilisateurs avec des feuilles de style personnalisées d'ajuster l'espacement ou la mise en page selon leurs besoins.
Users who need custom stylesheets to adjust layout for readability, users who zoom content and need flexible layouts that adapt properly, developers maintaining the codebase who cannot easily update or debug scattered inline styles, and users with cognitive disabilities who benefit from consistent, predictable layouts
Utilisateurs qui ont besoin de feuilles de style personnalisées pour ajuster la mise en page pour la lisibilité, utilisateurs qui zooment le contenu et ont besoin de mises en page flexibles qui s'adaptent correctement, développeurs maintenant la base de code qui ne peuvent pas facilement mettre à jour ou déboguer les styles en ligne dispersés, et utilisateurs avec des troubles cognitifs qui bénéficient de mises en page cohérentes et prévisibles
Touchpoint Styles Styles
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 4 WCAG 4
Location
/html[1]/body[1]/main[1]/div[2]/div[1]/div[3]/div[1]/span[1]/svg[1]
<svg class="" style="display:inline-block;vertical-align:middle" width="18" height="18" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path style="fill:#565D66" d="M953 45.8l-188.4-43.4c-...
Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes
Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
While layout-related inline styles are less problematic for accessibility than color/font styles, they still reduce maintainability, make responsive design harder to implement, and can interfere with user zoom and customization. Inline layout styles scatter presentation logic throughout HTML making it difficult to create consistent designs or implement site-wide changes. They also make it harder for users with custom stylesheets to adjust spacing or layout for their needs.
Bien que les styles en ligne liés à la mise en page soient moins problématiques pour l'accessibilité que les styles de couleur/police, ils réduisent encore la maintenabilité, rendent la conception responsive plus difficile à implémenter et peuvent interférer avec le zoom utilisateur et la personnalisation. Les styles de mise en page en ligne dispersent la logique de présentation dans tout le HTML, rendant difficile la création de conceptions cohérentes ou l'implémentation de changements à l'échelle du site. Ils rendent également plus difficile pour les utilisateurs avec des feuilles de style personnalisées d'ajuster l'espacement ou la mise en page selon leurs besoins.
Users who need custom stylesheets to adjust layout for readability, users who zoom content and need flexible layouts that adapt properly, developers maintaining the codebase who cannot easily update or debug scattered inline styles, and users with cognitive disabilities who benefit from consistent, predictable layouts
Utilisateurs qui ont besoin de feuilles de style personnalisées pour ajuster la mise en page pour la lisibilité, utilisateurs qui zooment le contenu et ont besoin de mises en page flexibles qui s'adaptent correctement, développeurs maintenant la base de code qui ne peuvent pas facilement mettre à jour ou déboguer les styles en ligne dispersés, et utilisateurs avec des troubles cognitifs qui bénéficient de mises en page cohérentes et prévisibles
Touchpoint Styles Styles
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 4 WCAG 4
Location
/html[1]/body[1]/main[1]/div[2]/div[1]/div[3]/div[2]/span[1]/svg[1]
<svg class="" style="display:inline-block;vertical-align:middle" width="18" height="18" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path style="fill:#565D66" d="M928 128h-832c-53 0-96 ...
Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes
Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
While layout-related inline styles are less problematic for accessibility than color/font styles, they still reduce maintainability, make responsive design harder to implement, and can interfere with user zoom and customization. Inline layout styles scatter presentation logic throughout HTML making it difficult to create consistent designs or implement site-wide changes. They also make it harder for users with custom stylesheets to adjust spacing or layout for their needs.
Bien que les styles en ligne liés à la mise en page soient moins problématiques pour l'accessibilité que les styles de couleur/police, ils réduisent encore la maintenabilité, rendent la conception responsive plus difficile à implémenter et peuvent interférer avec le zoom utilisateur et la personnalisation. Les styles de mise en page en ligne dispersent la logique de présentation dans tout le HTML, rendant difficile la création de conceptions cohérentes ou l'implémentation de changements à l'échelle du site. Ils rendent également plus difficile pour les utilisateurs avec des feuilles de style personnalisées d'ajuster l'espacement ou la mise en page selon leurs besoins.
Users who need custom stylesheets to adjust layout for readability, users who zoom content and need flexible layouts that adapt properly, developers maintaining the codebase who cannot easily update or debug scattered inline styles, and users with cognitive disabilities who benefit from consistent, predictable layouts
Utilisateurs qui ont besoin de feuilles de style personnalisées pour ajuster la mise en page pour la lisibilité, utilisateurs qui zooment le contenu et ont besoin de mises en page flexibles qui s'adaptent correctement, développeurs maintenant la base de code qui ne peuvent pas facilement mettre à jour ou déboguer les styles en ligne dispersés, et utilisateurs avec des troubles cognitifs qui bénéficient de mises en page cohérentes et prévisibles
Touchpoint Styles Styles
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 4 WCAG 4
Location
/html[1]/body[1]/main[1]/div[2]/div[1]/div[4]
<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>
Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes
Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
While layout-related inline styles are less problematic for accessibility than color/font styles, they still reduce maintainability, make responsive design harder to implement, and can interfere with user zoom and customization. Inline layout styles scatter presentation logic throughout HTML making it difficult to create consistent designs or implement site-wide changes. They also make it harder for users with custom stylesheets to adjust spacing or layout for their needs.
Bien que les styles en ligne liés à la mise en page soient moins problématiques pour l'accessibilité que les styles de couleur/police, ils réduisent encore la maintenabilité, rendent la conception responsive plus difficile à implémenter et peuvent interférer avec le zoom utilisateur et la personnalisation. Les styles de mise en page en ligne dispersent la logique de présentation dans tout le HTML, rendant difficile la création de conceptions cohérentes ou l'implémentation de changements à l'échelle du site. Ils rendent également plus difficile pour les utilisateurs avec des feuilles de style personnalisées d'ajuster l'espacement ou la mise en page selon leurs besoins.
Users who need custom stylesheets to adjust layout for readability, users who zoom content and need flexible layouts that adapt properly, developers maintaining the codebase who cannot easily update or debug scattered inline styles, and users with cognitive disabilities who benefit from consistent, predictable layouts
Utilisateurs qui ont besoin de feuilles de style personnalisées pour ajuster la mise en page pour la lisibilité, utilisateurs qui zooment le contenu et ont besoin de mises en page flexibles qui s'adaptent correctement, développeurs maintenant la base de code qui ne peuvent pas facilement mettre à jour ou déboguer les styles en ligne dispersés, et utilisateurs avec des troubles cognitifs qui bénéficient de mises en page cohérentes et prévisibles
Touchpoint Styles Styles
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 4 WCAG 4
Location
/html[1]/body[1]/main[1]/div[2]/div[1]/div[5]/form[1]/p[6]/input[1]
<input class="wpcf7-form-control wpcf7-submit has-spinner" type="submit" value="Submit" style="display: none;">
Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes
Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
While layout-related inline styles are less problematic for accessibility than color/font styles, they still reduce maintainability, make responsive design harder to implement, and can interfere with user zoom and customization. Inline layout styles scatter presentation logic throughout HTML making it difficult to create consistent designs or implement site-wide changes. They also make it harder for users with custom stylesheets to adjust spacing or layout for their needs.
Bien que les styles en ligne liés à la mise en page soient moins problématiques pour l'accessibilité que les styles de couleur/police, ils réduisent encore la maintenabilité, rendent la conception responsive plus difficile à implémenter et peuvent interférer avec le zoom utilisateur et la personnalisation. Les styles de mise en page en ligne dispersent la logique de présentation dans tout le HTML, rendant difficile la création de conceptions cohérentes ou l'implémentation de changements à l'échelle du site. Ils rendent également plus difficile pour les utilisateurs avec des feuilles de style personnalisées d'ajuster l'espacement ou la mise en page selon leurs besoins.
Users who need custom stylesheets to adjust layout for readability, users who zoom content and need flexible layouts that adapt properly, developers maintaining the codebase who cannot easily update or debug scattered inline styles, and users with cognitive disabilities who benefit from consistent, predictable layouts
Utilisateurs qui ont besoin de feuilles de style personnalisées pour ajuster la mise en page pour la lisibilité, utilisateurs qui zooment le contenu et ont besoin de mises en page flexibles qui s'adaptent correctement, développeurs maintenant la base de code qui ne peuvent pas facilement mettre à jour ou déboguer les styles en ligne dispersés, et utilisateurs avec des troubles cognitifs qui bénéficient de mises en page cohérentes et prévisibles
Touchpoint Styles Styles
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 4 WCAG 4
Location
/html[1]/body[1]/main[1]/div[2]/div[1]/div[5]/form[1]/p[7]
<p style="display: none !important;" class="akismet-fields-container" data-prefix="_wpcf7_ak_"><label>Δ<textarea name="_wpcf7_ak_hp_textarea" cols="45" rows="8" maxlength="100"></textarea></label><inp...
Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes
Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
While layout-related inline styles are less problematic for accessibility than color/font styles, they still reduce maintainability, make responsive design harder to implement, and can interfere with user zoom and customization. Inline layout styles scatter presentation logic throughout HTML making it difficult to create consistent designs or implement site-wide changes. They also make it harder for users with custom stylesheets to adjust spacing or layout for their needs.
Bien que les styles en ligne liés à la mise en page soient moins problématiques pour l'accessibilité que les styles de couleur/police, ils réduisent encore la maintenabilité, rendent la conception responsive plus difficile à implémenter et peuvent interférer avec le zoom utilisateur et la personnalisation. Les styles de mise en page en ligne dispersent la logique de présentation dans tout le HTML, rendant difficile la création de conceptions cohérentes ou l'implémentation de changements à l'échelle du site. Ils rendent également plus difficile pour les utilisateurs avec des feuilles de style personnalisées d'ajuster l'espacement ou la mise en page selon leurs besoins.
Users who need custom stylesheets to adjust layout for readability, users who zoom content and need flexible layouts that adapt properly, developers maintaining the codebase who cannot easily update or debug scattered inline styles, and users with cognitive disabilities who benefit from consistent, predictable layouts
Utilisateurs qui ont besoin de feuilles de style personnalisées pour ajuster la mise en page pour la lisibilité, utilisateurs qui zooment le contenu et ont besoin de mises en page flexibles qui s'adaptent correctement, développeurs maintenant la base de code qui ne peuvent pas facilement mettre à jour ou déboguer les styles en ligne dispersés, et utilisateurs avec des troubles cognitifs qui bénéficient de mises en page cohérentes et prévisibles
Touchpoint Styles Styles
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 4 WCAG 4
Location
/html[1]/body[1]/main[1]/div[2]/div[1]/div[5]/form[1]/div[3]/div[1]
<div class="grecaptcha-badge" data-style="bottomright" style="width: 256px; height: 60px; position: fixed; visibility: hidden; display: block; transition: right 0.3s ease 0s; bottom: 14px; right: -186...
Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes
Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
While layout-related inline styles are less problematic for accessibility than color/font styles, they still reduce maintainability, make responsive design harder to implement, and can interfere with user zoom and customization. Inline layout styles scatter presentation logic throughout HTML making it difficult to create consistent designs or implement site-wide changes. They also make it harder for users with custom stylesheets to adjust spacing or layout for their needs.
Bien que les styles en ligne liés à la mise en page soient moins problématiques pour l'accessibilité que les styles de couleur/police, ils réduisent encore la maintenabilité, rendent la conception responsive plus difficile à implémenter et peuvent interférer avec le zoom utilisateur et la personnalisation. Les styles de mise en page en ligne dispersent la logique de présentation dans tout le HTML, rendant difficile la création de conceptions cohérentes ou l'implémentation de changements à l'échelle du site. Ils rendent également plus difficile pour les utilisateurs avec des feuilles de style personnalisées d'ajuster l'espacement ou la mise en page selon leurs besoins.
Users who need custom stylesheets to adjust layout for readability, users who zoom content and need flexible layouts that adapt properly, developers maintaining the codebase who cannot easily update or debug scattered inline styles, and users with cognitive disabilities who benefit from consistent, predictable layouts
Utilisateurs qui ont besoin de feuilles de style personnalisées pour ajuster la mise en page pour la lisibilité, utilisateurs qui zooment le contenu et ont besoin de mises en page flexibles qui s'adaptent correctement, développeurs maintenant la base de code qui ne peuvent pas facilement mettre à jour ou déboguer les styles en ligne dispersés, et utilisateurs avec des troubles cognitifs qui bénéficient de mises en page cohérentes et prévisibles
Touchpoint Styles Styles
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 4 WCAG 4
Location
/html[1]/body[1]/main[1]/div[2]/div[1]/div[5]/form[1]/div[3]/div[1]/textarea[1]
<textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid rgb(193, 193, 193); margin: 10px 25px; padding: 0px; r...
Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes
Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
While layout-related inline styles are less problematic for accessibility than color/font styles, they still reduce maintainability, make responsive design harder to implement, and can interfere with user zoom and customization. Inline layout styles scatter presentation logic throughout HTML making it difficult to create consistent designs or implement site-wide changes. They also make it harder for users with custom stylesheets to adjust spacing or layout for their needs.
Bien que les styles en ligne liés à la mise en page soient moins problématiques pour l'accessibilité que les styles de couleur/police, ils réduisent encore la maintenabilité, rendent la conception responsive plus difficile à implémenter et peuvent interférer avec le zoom utilisateur et la personnalisation. Les styles de mise en page en ligne dispersent la logique de présentation dans tout le HTML, rendant difficile la création de conceptions cohérentes ou l'implémentation de changements à l'échelle du site. Ils rendent également plus difficile pour les utilisateurs avec des feuilles de style personnalisées d'ajuster l'espacement ou la mise en page selon leurs besoins.
Users who need custom stylesheets to adjust layout for readability, users who zoom content and need flexible layouts that adapt properly, developers maintaining the codebase who cannot easily update or debug scattered inline styles, and users with cognitive disabilities who benefit from consistent, predictable layouts
Utilisateurs qui ont besoin de feuilles de style personnalisées pour ajuster la mise en page pour la lisibilité, utilisateurs qui zooment le contenu et ont besoin de mises en page flexibles qui s'adaptent correctement, développeurs maintenant la base de code qui ne peuvent pas facilement mettre à jour ou déboguer les styles en ligne dispersés, et utilisateurs avec des troubles cognitifs qui bénéficient de mises en page cohérentes et prévisibles
Touchpoint Styles Styles
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 4 WCAG 4
Location
/html[1]/body[1]/main[1]/div[2]/div[1]/div[5]/form[1]/div[3]/iframe[1]
<iframe style="display: none;"></iframe>
Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes
Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
While layout-related inline styles are less problematic for accessibility than color/font styles, they still reduce maintainability, make responsive design harder to implement, and can interfere with user zoom and customization. Inline layout styles scatter presentation logic throughout HTML making it difficult to create consistent designs or implement site-wide changes. They also make it harder for users with custom stylesheets to adjust spacing or layout for their needs.
Bien que les styles en ligne liés à la mise en page soient moins problématiques pour l'accessibilité que les styles de couleur/police, ils réduisent encore la maintenabilité, rendent la conception responsive plus difficile à implémenter et peuvent interférer avec le zoom utilisateur et la personnalisation. Les styles de mise en page en ligne dispersent la logique de présentation dans tout le HTML, rendant difficile la création de conceptions cohérentes ou l'implémentation de changements à l'échelle du site. Ils rendent également plus difficile pour les utilisateurs avec des feuilles de style personnalisées d'ajuster l'espacement ou la mise en page selon leurs besoins.
Users who need custom stylesheets to adjust layout for readability, users who zoom content and need flexible layouts that adapt properly, developers maintaining the codebase who cannot easily update or debug scattered inline styles, and users with cognitive disabilities who benefit from consistent, predictable layouts
Utilisateurs qui ont besoin de feuilles de style personnalisées pour ajuster la mise en page pour la lisibilité, utilisateurs qui zooment le contenu et ont besoin de mises en page flexibles qui s'adaptent correctement, développeurs maintenant la base de code qui ne peuvent pas facilement mettre à jour ou déboguer les styles en ligne dispersés, et utilisateurs avec des troubles cognitifs qui bénéficient de mises en page cohérentes et prévisibles
Touchpoint Styles Styles
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 4 WCAG 4
Location
/html[1]/body[1]/footer[1]/div[1]/div[1]/div[2]/div[1]
<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>
Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes
Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
While layout-related inline styles are less problematic for accessibility than color/font styles, they still reduce maintainability, make responsive design harder to implement, and can interfere with user zoom and customization. Inline layout styles scatter presentation logic throughout HTML making it difficult to create consistent designs or implement site-wide changes. They also make it harder for users with custom stylesheets to adjust spacing or layout for their needs.
Bien que les styles en ligne liés à la mise en page soient moins problématiques pour l'accessibilité que les styles de couleur/police, ils réduisent encore la maintenabilité, rendent la conception responsive plus difficile à implémenter et peuvent interférer avec le zoom utilisateur et la personnalisation. Les styles de mise en page en ligne dispersent la logique de présentation dans tout le HTML, rendant difficile la création de conceptions cohérentes ou l'implémentation de changements à l'échelle du site. Ils rendent également plus difficile pour les utilisateurs avec des feuilles de style personnalisées d'ajuster l'espacement ou la mise en page selon leurs besoins.
Users who need custom stylesheets to adjust layout for readability, users who zoom content and need flexible layouts that adapt properly, developers maintaining the codebase who cannot easily update or debug scattered inline styles, and users with cognitive disabilities who benefit from consistent, predictable layouts
Utilisateurs qui ont besoin de feuilles de style personnalisées pour ajuster la mise en page pour la lisibilité, utilisateurs qui zooment le contenu et ont besoin de mises en page flexibles qui s'adaptent correctement, développeurs maintenant la base de code qui ne peuvent pas facilement mettre à jour ou déboguer les styles en ligne dispersés, et utilisateurs avec des troubles cognitifs qui bénéficient de mises en page cohérentes et prévisibles
Touchpoint Styles Styles
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 4 WCAG 4
Location
/html[1]/body[1]/footer[1]/div[1]/div[1]/div[5]/div[1]
<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>
Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes
Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
While layout-related inline styles are less problematic for accessibility than color/font styles, they still reduce maintainability, make responsive design harder to implement, and can interfere with user zoom and customization. Inline layout styles scatter presentation logic throughout HTML making it difficult to create consistent designs or implement site-wide changes. They also make it harder for users with custom stylesheets to adjust spacing or layout for their needs.
Bien que les styles en ligne liés à la mise en page soient moins problématiques pour l'accessibilité que les styles de couleur/police, ils réduisent encore la maintenabilité, rendent la conception responsive plus difficile à implémenter et peuvent interférer avec le zoom utilisateur et la personnalisation. Les styles de mise en page en ligne dispersent la logique de présentation dans tout le HTML, rendant difficile la création de conceptions cohérentes ou l'implémentation de changements à l'échelle du site. Ils rendent également plus difficile pour les utilisateurs avec des feuilles de style personnalisées d'ajuster l'espacement ou la mise en page selon leurs besoins.
Users who need custom stylesheets to adjust layout for readability, users who zoom content and need flexible layouts that adapt properly, developers maintaining the codebase who cannot easily update or debug scattered inline styles, and users with cognitive disabilities who benefit from consistent, predictable layouts
Utilisateurs qui ont besoin de feuilles de style personnalisées pour ajuster la mise en page pour la lisibilité, utilisateurs qui zooment le contenu et ont besoin de mises en page flexibles qui s'adaptent correctement, développeurs maintenant la base de code qui ne peuvent pas facilement mettre à jour ou déboguer les styles en ligne dispersés, et utilisateurs avec des troubles cognitifs qui bénéficient de mises en page cohérentes et prévisibles
Touchpoint Styles Styles
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 4 WCAG 4
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[1]/div[1]/figure[1]/img[1]
<img loading="lazy" decoding="async" width="100" height="100" src="https://cnib-accesslabs.ca/wp-content/uploads//CNIB-Footer.svg" alt="CNIB" class="wp-image-39" style="width:300px;height:109px">
Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes
Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
While layout-related inline styles are less problematic for accessibility than color/font styles, they still reduce maintainability, make responsive design harder to implement, and can interfere with user zoom and customization. Inline layout styles scatter presentation logic throughout HTML making it difficult to create consistent designs or implement site-wide changes. They also make it harder for users with custom stylesheets to adjust spacing or layout for their needs.
Bien que les styles en ligne liés à la mise en page soient moins problématiques pour l'accessibilité que les styles de couleur/police, ils réduisent encore la maintenabilité, rendent la conception responsive plus difficile à implémenter et peuvent interférer avec le zoom utilisateur et la personnalisation. Les styles de mise en page en ligne dispersent la logique de présentation dans tout le HTML, rendant difficile la création de conceptions cohérentes ou l'implémentation de changements à l'échelle du site. Ils rendent également plus difficile pour les utilisateurs avec des feuilles de style personnalisées d'ajuster l'espacement ou la mise en page selon leurs besoins.
Users who need custom stylesheets to adjust layout for readability, users who zoom content and need flexible layouts that adapt properly, developers maintaining the codebase who cannot easily update or debug scattered inline styles, and users with cognitive disabilities who benefit from consistent, predictable layouts
Utilisateurs qui ont besoin de feuilles de style personnalisées pour ajuster la mise en page pour la lisibilité, utilisateurs qui zooment le contenu et ont besoin de mises en page flexibles qui s'adaptent correctement, développeurs maintenant la base de code qui ne peuvent pas facilement mettre à jour ou déboguer les styles en ligne dispersés, et utilisateurs avec des troubles cognitifs qui bénéficient de mises en page cohérentes et prévisibles
Touchpoint Styles Styles
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 4 WCAG 4
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[1]/div[6]/div[1]
<div style="height:100px" aria-hidden="true" class="wp-block-spacer footer-section-spacer"></div>
Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes
Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
While layout-related inline styles are less problematic for accessibility than color/font styles, they still reduce maintainability, make responsive design harder to implement, and can interfere with user zoom and customization. Inline layout styles scatter presentation logic throughout HTML making it difficult to create consistent designs or implement site-wide changes. They also make it harder for users with custom stylesheets to adjust spacing or layout for their needs.
Bien que les styles en ligne liés à la mise en page soient moins problématiques pour l'accessibilité que les styles de couleur/police, ils réduisent encore la maintenabilité, rendent la conception responsive plus difficile à implémenter et peuvent interférer avec le zoom utilisateur et la personnalisation. Les styles de mise en page en ligne dispersent la logique de présentation dans tout le HTML, rendant difficile la création de conceptions cohérentes ou l'implémentation de changements à l'échelle du site. Ils rendent également plus difficile pour les utilisateurs avec des feuilles de style personnalisées d'ajuster l'espacement ou la mise en page selon leurs besoins.
Users who need custom stylesheets to adjust layout for readability, users who zoom content and need flexible layouts that adapt properly, developers maintaining the codebase who cannot easily update or debug scattered inline styles, and users with cognitive disabilities who benefit from consistent, predictable layouts
Utilisateurs qui ont besoin de feuilles de style personnalisées pour ajuster la mise en page pour la lisibilité, utilisateurs qui zooment le contenu et ont besoin de mises en page flexibles qui s'adaptent correctement, développeurs maintenant la base de code qui ne peuvent pas facilement mettre à jour ou déboguer les styles en ligne dispersés, et utilisateurs avec des troubles cognitifs qui bénéficient de mises en page cohérentes et prévisibles
Touchpoint Styles Styles
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 4 WCAG 4
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[3]/div[1]
<div style="height:31px" aria-hidden="true" class="wp-block-spacer"></div>
Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes
Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
While layout-related inline styles are less problematic for accessibility than color/font styles, they still reduce maintainability, make responsive design harder to implement, and can interfere with user zoom and customization. Inline layout styles scatter presentation logic throughout HTML making it difficult to create consistent designs or implement site-wide changes. They also make it harder for users with custom stylesheets to adjust spacing or layout for their needs.
Bien que les styles en ligne liés à la mise en page soient moins problématiques pour l'accessibilité que les styles de couleur/police, ils réduisent encore la maintenabilité, rendent la conception responsive plus difficile à implémenter et peuvent interférer avec le zoom utilisateur et la personnalisation. Les styles de mise en page en ligne dispersent la logique de présentation dans tout le HTML, rendant difficile la création de conceptions cohérentes ou l'implémentation de changements à l'échelle du site. Ils rendent également plus difficile pour les utilisateurs avec des feuilles de style personnalisées d'ajuster l'espacement ou la mise en page selon leurs besoins.
Users who need custom stylesheets to adjust layout for readability, users who zoom content and need flexible layouts that adapt properly, developers maintaining the codebase who cannot easily update or debug scattered inline styles, and users with cognitive disabilities who benefit from consistent, predictable layouts
Utilisateurs qui ont besoin de feuilles de style personnalisées pour ajuster la mise en page pour la lisibilité, utilisateurs qui zooment le contenu et ont besoin de mises en page flexibles qui s'adaptent correctement, développeurs maintenant la base de code qui ne peuvent pas facilement mettre à jour ou déboguer les styles en ligne dispersés, et utilisateurs avec des troubles cognitifs qui bénéficient de mises en page cohérentes et prévisibles
Touchpoint Styles Styles
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 4 WCAG 4
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[6]/div[1]
<div style="height:14px" aria-hidden="true" class="wp-block-spacer"></div>
Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes
Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
While layout-related inline styles are less problematic for accessibility than color/font styles, they still reduce maintainability, make responsive design harder to implement, and can interfere with user zoom and customization. Inline layout styles scatter presentation logic throughout HTML making it difficult to create consistent designs or implement site-wide changes. They also make it harder for users with custom stylesheets to adjust spacing or layout for their needs.
Bien que les styles en ligne liés à la mise en page soient moins problématiques pour l'accessibilité que les styles de couleur/police, ils réduisent encore la maintenabilité, rendent la conception responsive plus difficile à implémenter et peuvent interférer avec le zoom utilisateur et la personnalisation. Les styles de mise en page en ligne dispersent la logique de présentation dans tout le HTML, rendant difficile la création de conceptions cohérentes ou l'implémentation de changements à l'échelle du site. Ils rendent également plus difficile pour les utilisateurs avec des feuilles de style personnalisées d'ajuster l'espacement ou la mise en page selon leurs besoins.
Users who need custom stylesheets to adjust layout for readability, users who zoom content and need flexible layouts that adapt properly, developers maintaining the codebase who cannot easily update or debug scattered inline styles, and users with cognitive disabilities who benefit from consistent, predictable layouts
Utilisateurs qui ont besoin de feuilles de style personnalisées pour ajuster la mise en page pour la lisibilité, utilisateurs qui zooment le contenu et ont besoin de mises en page flexibles qui s'adaptent correctement, développeurs maintenant la base de code qui ne peuvent pas facilement mettre à jour ou déboguer les styles en ligne dispersés, et utilisateurs avec des troubles cognitifs qui bénéficient de mises en page cohérentes et prévisibles
Touchpoint Styles Styles
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 4 WCAG 4
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[9]/div[1]
<div style="height:48px" aria-hidden="true" class="wp-block-spacer"></div>
Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes
Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
While layout-related inline styles are less problematic for accessibility than color/font styles, they still reduce maintainability, make responsive design harder to implement, and can interfere with user zoom and customization. Inline layout styles scatter presentation logic throughout HTML making it difficult to create consistent designs or implement site-wide changes. They also make it harder for users with custom stylesheets to adjust spacing or layout for their needs.
Bien que les styles en ligne liés à la mise en page soient moins problématiques pour l'accessibilité que les styles de couleur/police, ils réduisent encore la maintenabilité, rendent la conception responsive plus difficile à implémenter et peuvent interférer avec le zoom utilisateur et la personnalisation. Les styles de mise en page en ligne dispersent la logique de présentation dans tout le HTML, rendant difficile la création de conceptions cohérentes ou l'implémentation de changements à l'échelle du site. Ils rendent également plus difficile pour les utilisateurs avec des feuilles de style personnalisées d'ajuster l'espacement ou la mise en page selon leurs besoins.
Users who need custom stylesheets to adjust layout for readability, users who zoom content and need flexible layouts that adapt properly, developers maintaining the codebase who cannot easily update or debug scattered inline styles, and users with cognitive disabilities who benefit from consistent, predictable layouts
Utilisateurs qui ont besoin de feuilles de style personnalisées pour ajuster la mise en page pour la lisibilité, utilisateurs qui zooment le contenu et ont besoin de mises en page flexibles qui s'adaptent correctement, développeurs maintenant la base de code qui ne peuvent pas facilement mettre à jour ou déboguer les styles en ligne dispersés, et utilisateurs avec des troubles cognitifs qui bénéficient de mises en page cohérentes et prévisibles
Touchpoint Styles Styles
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 4 WCAG 4
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[10]/ul[1]
<ul style="list-style-type:none !important;padding-left:0px;" class="english-only">
<li><img decoding="async" class="wp-image-4858" style="float:left;margin:0;" width="25%" src="https://cnib-accessla...
Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes
Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
While layout-related inline styles are less problematic for accessibility than color/font styles, they still reduce maintainability, make responsive design harder to implement, and can interfere with user zoom and customization. Inline layout styles scatter presentation logic throughout HTML making it difficult to create consistent designs or implement site-wide changes. They also make it harder for users with custom stylesheets to adjust spacing or layout for their needs.
Bien que les styles en ligne liés à la mise en page soient moins problématiques pour l'accessibilité que les styles de couleur/police, ils réduisent encore la maintenabilité, rendent la conception responsive plus difficile à implémenter et peuvent interférer avec le zoom utilisateur et la personnalisation. Les styles de mise en page en ligne dispersent la logique de présentation dans tout le HTML, rendant difficile la création de conceptions cohérentes ou l'implémentation de changements à l'échelle du site. Ils rendent également plus difficile pour les utilisateurs avec des feuilles de style personnalisées d'ajuster l'espacement ou la mise en page selon leurs besoins.
Users who need custom stylesheets to adjust layout for readability, users who zoom content and need flexible layouts that adapt properly, developers maintaining the codebase who cannot easily update or debug scattered inline styles, and users with cognitive disabilities who benefit from consistent, predictable layouts
Utilisateurs qui ont besoin de feuilles de style personnalisées pour ajuster la mise en page pour la lisibilité, utilisateurs qui zooment le contenu et ont besoin de mises en page flexibles qui s'adaptent correctement, développeurs maintenant la base de code qui ne peuvent pas facilement mettre à jour ou déboguer les styles en ligne dispersés, et utilisateurs avec des troubles cognitifs qui bénéficient de mises en page cohérentes et prévisibles
Touchpoint Styles Styles
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 4 WCAG 4
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[10]/ul[1]/li[1]/img[1]
<img decoding="async" class="wp-image-4858" style="float:left;margin:0;" width="25%" src="https://cnib-accesslabs.ca/wp-content/uploads/2023/09/CNIB-Logo-White.png" alt="CNIB Foundation" srcset="https...
Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes
Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
While layout-related inline styles are less problematic for accessibility than color/font styles, they still reduce maintainability, make responsive design harder to implement, and can interfere with user zoom and customization. Inline layout styles scatter presentation logic throughout HTML making it difficult to create consistent designs or implement site-wide changes. They also make it harder for users with custom stylesheets to adjust spacing or layout for their needs.
Bien que les styles en ligne liés à la mise en page soient moins problématiques pour l'accessibilité que les styles de couleur/police, ils réduisent encore la maintenabilité, rendent la conception responsive plus difficile à implémenter et peuvent interférer avec le zoom utilisateur et la personnalisation. Les styles de mise en page en ligne dispersent la logique de présentation dans tout le HTML, rendant difficile la création de conceptions cohérentes ou l'implémentation de changements à l'échelle du site. Ils rendent également plus difficile pour les utilisateurs avec des feuilles de style personnalisées d'ajuster l'espacement ou la mise en page selon leurs besoins.
Users who need custom stylesheets to adjust layout for readability, users who zoom content and need flexible layouts that adapt properly, developers maintaining the codebase who cannot easily update or debug scattered inline styles, and users with cognitive disabilities who benefit from consistent, predictable layouts
Utilisateurs qui ont besoin de feuilles de style personnalisées pour ajuster la mise en page pour la lisibilité, utilisateurs qui zooment le contenu et ont besoin de mises en page flexibles qui s'adaptent correctement, développeurs maintenant la base de code qui ne peuvent pas facilement mettre à jour ou déboguer les styles en ligne dispersés, et utilisateurs avec des troubles cognitifs qui bénéficient de mises en page cohérentes et prévisibles
Touchpoint Styles Styles
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 4 WCAG 4
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[10]/ul[1]/li[2]/img[1]
<img decoding="async" class="wp-image-4866" style="float:left;margin:0;" width="25%" src="https://cnib-accesslabs.ca/wp-content/uploads/2023/09/VLR_Canada_EN_withTM.png" alt="Vision Loss Rehabilitatio...
Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes
Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
While layout-related inline styles are less problematic for accessibility than color/font styles, they still reduce maintainability, make responsive design harder to implement, and can interfere with user zoom and customization. Inline layout styles scatter presentation logic throughout HTML making it difficult to create consistent designs or implement site-wide changes. They also make it harder for users with custom stylesheets to adjust spacing or layout for their needs.
Bien que les styles en ligne liés à la mise en page soient moins problématiques pour l'accessibilité que les styles de couleur/police, ils réduisent encore la maintenabilité, rendent la conception responsive plus difficile à implémenter et peuvent interférer avec le zoom utilisateur et la personnalisation. Les styles de mise en page en ligne dispersent la logique de présentation dans tout le HTML, rendant difficile la création de conceptions cohérentes ou l'implémentation de changements à l'échelle du site. Ils rendent également plus difficile pour les utilisateurs avec des feuilles de style personnalisées d'ajuster l'espacement ou la mise en page selon leurs besoins.
Users who need custom stylesheets to adjust layout for readability, users who zoom content and need flexible layouts that adapt properly, developers maintaining the codebase who cannot easily update or debug scattered inline styles, and users with cognitive disabilities who benefit from consistent, predictable layouts
Utilisateurs qui ont besoin de feuilles de style personnalisées pour ajuster la mise en page pour la lisibilité, utilisateurs qui zooment le contenu et ont besoin de mises en page flexibles qui s'adaptent correctement, développeurs maintenant la base de code qui ne peuvent pas facilement mettre à jour ou déboguer les styles en ligne dispersés, et utilisateurs avec des troubles cognitifs qui bénéficient de mises en page cohérentes et prévisibles
Touchpoint Styles Styles
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 4 WCAG 4
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[10]/ul[1]/li[3]/img[1]
<img decoding="async" class="wp-image-4860" style="float:left;margin:0;" width="25%" src="https://cnib-accesslabs.ca/wp-content/uploads/2023/09/CNIB_Deafblind_ENG.png" alt="Deafblind Community Service...
Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes
Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
While layout-related inline styles are less problematic for accessibility than color/font styles, they still reduce maintainability, make responsive design harder to implement, and can interfere with user zoom and customization. Inline layout styles scatter presentation logic throughout HTML making it difficult to create consistent designs or implement site-wide changes. They also make it harder for users with custom stylesheets to adjust spacing or layout for their needs.
Bien que les styles en ligne liés à la mise en page soient moins problématiques pour l'accessibilité que les styles de couleur/police, ils réduisent encore la maintenabilité, rendent la conception responsive plus difficile à implémenter et peuvent interférer avec le zoom utilisateur et la personnalisation. Les styles de mise en page en ligne dispersent la logique de présentation dans tout le HTML, rendant difficile la création de conceptions cohérentes ou l'implémentation de changements à l'échelle du site. Ils rendent également plus difficile pour les utilisateurs avec des feuilles de style personnalisées d'ajuster l'espacement ou la mise en page selon leurs besoins.
Users who need custom stylesheets to adjust layout for readability, users who zoom content and need flexible layouts that adapt properly, developers maintaining the codebase who cannot easily update or debug scattered inline styles, and users with cognitive disabilities who benefit from consistent, predictable layouts
Utilisateurs qui ont besoin de feuilles de style personnalisées pour ajuster la mise en page pour la lisibilité, utilisateurs qui zooment le contenu et ont besoin de mises en page flexibles qui s'adaptent correctement, développeurs maintenant la base de code qui ne peuvent pas facilement mettre à jour ou déboguer les styles en ligne dispersés, et utilisateurs avec des troubles cognitifs qui bénéficient de mises en page cohérentes et prévisibles
Touchpoint Styles Styles
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 4 WCAG 4
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[10]/ul[1]/li[4]/img[1]
<img decoding="async" class="wp-image-4854" style="float:left;margin:0;" width="25%" src="https://cnib-accesslabs.ca/wp-content/uploads/2023/09/CNIB-Foundation_Guide-Dogs_Logo_White_ENG.png" alt="CNIB...
Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes
Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
While layout-related inline styles are less problematic for accessibility than color/font styles, they still reduce maintainability, make responsive design harder to implement, and can interfere with user zoom and customization. Inline layout styles scatter presentation logic throughout HTML making it difficult to create consistent designs or implement site-wide changes. They also make it harder for users with custom stylesheets to adjust spacing or layout for their needs.
Bien que les styles en ligne liés à la mise en page soient moins problématiques pour l'accessibilité que les styles de couleur/police, ils réduisent encore la maintenabilité, rendent la conception responsive plus difficile à implémenter et peuvent interférer avec le zoom utilisateur et la personnalisation. Les styles de mise en page en ligne dispersent la logique de présentation dans tout le HTML, rendant difficile la création de conceptions cohérentes ou l'implémentation de changements à l'échelle du site. Ils rendent également plus difficile pour les utilisateurs avec des feuilles de style personnalisées d'ajuster l'espacement ou la mise en page selon leurs besoins.
Users who need custom stylesheets to adjust layout for readability, users who zoom content and need flexible layouts that adapt properly, developers maintaining the codebase who cannot easily update or debug scattered inline styles, and users with cognitive disabilities who benefit from consistent, predictable layouts
Utilisateurs qui ont besoin de feuilles de style personnalisées pour ajuster la mise en page pour la lisibilité, utilisateurs qui zooment le contenu et ont besoin de mises en page flexibles qui s'adaptent correctement, développeurs maintenant la base de code qui ne peuvent pas facilement mettre à jour ou déboguer les styles en ligne dispersés, et utilisateurs avec des troubles cognitifs qui bénéficient de mises en page cohérentes et prévisibles
Touchpoint Styles Styles
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 4 WCAG 4
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[11]/ul[1]
<ul style="list-style-type:none !important;padding-left:0px;" class="french-only">
<li><img decoding="async" width="25%" class="wp-image-4858" style="float:left;margin:0;" src="https://cnib-accesslab...
Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes
Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
While layout-related inline styles are less problematic for accessibility than color/font styles, they still reduce maintainability, make responsive design harder to implement, and can interfere with user zoom and customization. Inline layout styles scatter presentation logic throughout HTML making it difficult to create consistent designs or implement site-wide changes. They also make it harder for users with custom stylesheets to adjust spacing or layout for their needs.
Bien que les styles en ligne liés à la mise en page soient moins problématiques pour l'accessibilité que les styles de couleur/police, ils réduisent encore la maintenabilité, rendent la conception responsive plus difficile à implémenter et peuvent interférer avec le zoom utilisateur et la personnalisation. Les styles de mise en page en ligne dispersent la logique de présentation dans tout le HTML, rendant difficile la création de conceptions cohérentes ou l'implémentation de changements à l'échelle du site. Ils rendent également plus difficile pour les utilisateurs avec des feuilles de style personnalisées d'ajuster l'espacement ou la mise en page selon leurs besoins.
Users who need custom stylesheets to adjust layout for readability, users who zoom content and need flexible layouts that adapt properly, developers maintaining the codebase who cannot easily update or debug scattered inline styles, and users with cognitive disabilities who benefit from consistent, predictable layouts
Utilisateurs qui ont besoin de feuilles de style personnalisées pour ajuster la mise en page pour la lisibilité, utilisateurs qui zooment le contenu et ont besoin de mises en page flexibles qui s'adaptent correctement, développeurs maintenant la base de code qui ne peuvent pas facilement mettre à jour ou déboguer les styles en ligne dispersés, et utilisateurs avec des troubles cognitifs qui bénéficient de mises en page cohérentes et prévisibles
Touchpoint Styles Styles
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 4 WCAG 4
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[11]/ul[1]/li[1]/img[1]
<img decoding="async" width="25%" class="wp-image-4858" style="float:left;margin:0;" src="https://cnib-accesslabs.ca/wp-content/uploads/2023/09/CNIB_ONLY_Wht_FRE_.png" alt="INCA">
Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes
Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
While layout-related inline styles are less problematic for accessibility than color/font styles, they still reduce maintainability, make responsive design harder to implement, and can interfere with user zoom and customization. Inline layout styles scatter presentation logic throughout HTML making it difficult to create consistent designs or implement site-wide changes. They also make it harder for users with custom stylesheets to adjust spacing or layout for their needs.
Bien que les styles en ligne liés à la mise en page soient moins problématiques pour l'accessibilité que les styles de couleur/police, ils réduisent encore la maintenabilité, rendent la conception responsive plus difficile à implémenter et peuvent interférer avec le zoom utilisateur et la personnalisation. Les styles de mise en page en ligne dispersent la logique de présentation dans tout le HTML, rendant difficile la création de conceptions cohérentes ou l'implémentation de changements à l'échelle du site. Ils rendent également plus difficile pour les utilisateurs avec des feuilles de style personnalisées d'ajuster l'espacement ou la mise en page selon leurs besoins.
Users who need custom stylesheets to adjust layout for readability, users who zoom content and need flexible layouts that adapt properly, developers maintaining the codebase who cannot easily update or debug scattered inline styles, and users with cognitive disabilities who benefit from consistent, predictable layouts
Utilisateurs qui ont besoin de feuilles de style personnalisées pour ajuster la mise en page pour la lisibilité, utilisateurs qui zooment le contenu et ont besoin de mises en page flexibles qui s'adaptent correctement, développeurs maintenant la base de code qui ne peuvent pas facilement mettre à jour ou déboguer les styles en ligne dispersés, et utilisateurs avec des troubles cognitifs qui bénéficient de mises en page cohérentes et prévisibles
Touchpoint Styles Styles
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 4 WCAG 4
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[11]/ul[1]/li[2]/img[1]
<img decoding="async" width="25%" class="wp-image-4866" style="float:left;margin:0;" src="https://cnib-accesslabs.ca/wp-content/uploads/2023/09/VLR_Canada_FR_withMC.png" alt="Readaptation En Deficienc...
Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes
Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
While layout-related inline styles are less problematic for accessibility than color/font styles, they still reduce maintainability, make responsive design harder to implement, and can interfere with user zoom and customization. Inline layout styles scatter presentation logic throughout HTML making it difficult to create consistent designs or implement site-wide changes. They also make it harder for users with custom stylesheets to adjust spacing or layout for their needs.
Bien que les styles en ligne liés à la mise en page soient moins problématiques pour l'accessibilité que les styles de couleur/police, ils réduisent encore la maintenabilité, rendent la conception responsive plus difficile à implémenter et peuvent interférer avec le zoom utilisateur et la personnalisation. Les styles de mise en page en ligne dispersent la logique de présentation dans tout le HTML, rendant difficile la création de conceptions cohérentes ou l'implémentation de changements à l'échelle du site. Ils rendent également plus difficile pour les utilisateurs avec des feuilles de style personnalisées d'ajuster l'espacement ou la mise en page selon leurs besoins.
Users who need custom stylesheets to adjust layout for readability, users who zoom content and need flexible layouts that adapt properly, developers maintaining the codebase who cannot easily update or debug scattered inline styles, and users with cognitive disabilities who benefit from consistent, predictable layouts
Utilisateurs qui ont besoin de feuilles de style personnalisées pour ajuster la mise en page pour la lisibilité, utilisateurs qui zooment le contenu et ont besoin de mises en page flexibles qui s'adaptent correctement, développeurs maintenant la base de code qui ne peuvent pas facilement mettre à jour ou déboguer les styles en ligne dispersés, et utilisateurs avec des troubles cognitifs qui bénéficient de mises en page cohérentes et prévisibles
Touchpoint Styles Styles
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 4 WCAG 4
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[11]/ul[1]/li[3]/img[1]
<img decoding="async" width="25%" class="wp-image-4860" style="float:left;margin:0;" src="https://cnib-accesslabs.ca/wp-content/uploads/2023/09/CNIB_Deafblind_FR.png" alt="Services Communautaires Surd...
Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes
Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
While layout-related inline styles are less problematic for accessibility than color/font styles, they still reduce maintainability, make responsive design harder to implement, and can interfere with user zoom and customization. Inline layout styles scatter presentation logic throughout HTML making it difficult to create consistent designs or implement site-wide changes. They also make it harder for users with custom stylesheets to adjust spacing or layout for their needs.
Bien que les styles en ligne liés à la mise en page soient moins problématiques pour l'accessibilité que les styles de couleur/police, ils réduisent encore la maintenabilité, rendent la conception responsive plus difficile à implémenter et peuvent interférer avec le zoom utilisateur et la personnalisation. Les styles de mise en page en ligne dispersent la logique de présentation dans tout le HTML, rendant difficile la création de conceptions cohérentes ou l'implémentation de changements à l'échelle du site. Ils rendent également plus difficile pour les utilisateurs avec des feuilles de style personnalisées d'ajuster l'espacement ou la mise en page selon leurs besoins.
Users who need custom stylesheets to adjust layout for readability, users who zoom content and need flexible layouts that adapt properly, developers maintaining the codebase who cannot easily update or debug scattered inline styles, and users with cognitive disabilities who benefit from consistent, predictable layouts
Utilisateurs qui ont besoin de feuilles de style personnalisées pour ajuster la mise en page pour la lisibilité, utilisateurs qui zooment le contenu et ont besoin de mises en page flexibles qui s'adaptent correctement, développeurs maintenant la base de code qui ne peuvent pas facilement mettre à jour ou déboguer les styles en ligne dispersés, et utilisateurs avec des troubles cognitifs qui bénéficient de mises en page cohérentes et prévisibles
Touchpoint Styles Styles
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 4 WCAG 4
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[11]/ul[1]/li[4]/img[1]
<img decoding="async" width="25%" class="wp-image-4854" style="float:left;margin:0;" src="https://cnib-accesslabs.ca/wp-content/uploads/2023/09/CNIB-Foundation_Guide-Dogs_Logo_White_FRE.png" alt="Chie...
Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes
Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
While layout-related inline styles are less problematic for accessibility than color/font styles, they still reduce maintainability, make responsive design harder to implement, and can interfere with user zoom and customization. Inline layout styles scatter presentation logic throughout HTML making it difficult to create consistent designs or implement site-wide changes. They also make it harder for users with custom stylesheets to adjust spacing or layout for their needs.
Bien que les styles en ligne liés à la mise en page soient moins problématiques pour l'accessibilité que les styles de couleur/police, ils réduisent encore la maintenabilité, rendent la conception responsive plus difficile à implémenter et peuvent interférer avec le zoom utilisateur et la personnalisation. Les styles de mise en page en ligne dispersent la logique de présentation dans tout le HTML, rendant difficile la création de conceptions cohérentes ou l'implémentation de changements à l'échelle du site. Ils rendent également plus difficile pour les utilisateurs avec des feuilles de style personnalisées d'ajuster l'espacement ou la mise en page selon leurs besoins.
Users who need custom stylesheets to adjust layout for readability, users who zoom content and need flexible layouts that adapt properly, developers maintaining the codebase who cannot easily update or debug scattered inline styles, and users with cognitive disabilities who benefit from consistent, predictable layouts
Utilisateurs qui ont besoin de feuilles de style personnalisées pour ajuster la mise en page pour la lisibilité, utilisateurs qui zooment le contenu et ont besoin de mises en page flexibles qui s'adaptent correctement, développeurs maintenant la base de code qui ne peuvent pas facilement mettre à jour ou déboguer les styles en ligne dispersés, et utilisateurs avec des troubles cognitifs qui bénéficient de mises en page cohérentes et prévisibles
Touchpoint Styles Styles
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 4 WCAG 4
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[12]/div[1]
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
Style tags in HTML document define layout properties, which should preferably be in external CSS files for better maintainability and performance
Les balises style dans le document HTML définissent des propriétés de mise en page qui devraient de préférence être dans des fichiers CSS externes pour une meilleure maintenabilité et performance
While layout CSS in <style> tags is less problematic than inline styles, using external CSS files provides better caching, allows CSS to be shared across pages, makes maintenance easier, enables better testing, and improves page load performance. Embedded <style> blocks increase HTML file size, prevent browser caching of styles, make it harder to implement site-wide design changes, and can create flash of unstyled content issues. External CSS also makes it easier to implement responsive design and media queries consistently.
Bien que le CSS de mise en page dans les balises <style> soit moins problématique que les styles en ligne, l'utilisation de fichiers CSS externes offre une meilleure mise en cache, permet au CSS d'être partagé entre les pages, facilite la maintenance, permet de meilleurs tests et améliore les performances de chargement des pages. Les blocs <style> intégrés augmentent la taille du fichier HTML, empêchent la mise en cache des styles par le navigateur, rendent plus difficile l'implémentation de changements de design à l'échelle du site et peuvent créer des problèmes d'affichage de contenu non stylé. Le CSS externe facilite également l'implémentation cohérente du design adaptatif et des requêtes média.
All users benefit from faster page loads through CSS caching, users on slow connections who download unnecessary CSS with every page, users who zoom or need responsive layouts that should be managed centrally, developers maintaining scattered style blocks across multiple pages, and users whose custom stylesheets work more predictably when site styles are in external files
Tous les utilisateurs bénéficient de chargements de pages plus rapides grâce à la mise en cache CSS, les utilisateurs avec des connexions lentes qui téléchargent du CSS inutile à chaque page, les utilisateurs qui zooment ou ont besoin de mises en page adaptatives qui devraient être gérées de manière centralisée, les développeurs maintenant des blocs de style dispersés sur plusieurs pages, et les utilisateurs dont les feuilles de style personnalisées fonctionnent de manière plus prévisible lorsque les styles du site sont dans des fichiers externes
Touchpoint Styles Styles
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 4 WCAG 4
Location
/html[1]/head[1]/style[1]
<style>
.wpcf7-submit{
display:none;
}
.recaptcha-btn{
display:block;
}
.grecaptcha-badge {display: none;}
</style>
Style tags in HTML document define layout properties, which should preferably be in external CSS files for better maintainability and performance
Les balises style dans le document HTML définissent des propriétés de mise en page qui devraient de préférence être dans des fichiers CSS externes pour une meilleure maintenabilité et performance
While layout CSS in <style> tags is less problematic than inline styles, using external CSS files provides better caching, allows CSS to be shared across pages, makes maintenance easier, enables better testing, and improves page load performance. Embedded <style> blocks increase HTML file size, prevent browser caching of styles, make it harder to implement site-wide design changes, and can create flash of unstyled content issues. External CSS also makes it easier to implement responsive design and media queries consistently.
Bien que le CSS de mise en page dans les balises <style> soit moins problématique que les styles en ligne, l'utilisation de fichiers CSS externes offre une meilleure mise en cache, permet au CSS d'être partagé entre les pages, facilite la maintenance, permet de meilleurs tests et améliore les performances de chargement des pages. Les blocs <style> intégrés augmentent la taille du fichier HTML, empêchent la mise en cache des styles par le navigateur, rendent plus difficile l'implémentation de changements de design à l'échelle du site et peuvent créer des problèmes d'affichage de contenu non stylé. Le CSS externe facilite également l'implémentation cohérente du design adaptatif et des requêtes média.
All users benefit from faster page loads through CSS caching, users on slow connections who download unnecessary CSS with every page, users who zoom or need responsive layouts that should be managed centrally, developers maintaining scattered style blocks across multiple pages, and users whose custom stylesheets work more predictably when site styles are in external files
Tous les utilisateurs bénéficient de chargements de pages plus rapides grâce à la mise en cache CSS, les utilisateurs avec des connexions lentes qui téléchargent du CSS inutile à chaque page, les utilisateurs qui zooment ou ont besoin de mises en page adaptatives qui devraient être gérées de manière centralisée, les développeurs maintenant des blocs de style dispersés sur plusieurs pages, et les utilisateurs dont les feuilles de style personnalisées fonctionnent de manière plus prévisible lorsque les styles du site sont dans des fichiers externes
Touchpoint Styles Styles
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 4 WCAG 4
Location
/html[1]/head[1]/style[2]
<style>img:is([sizes="auto" i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px }</style>
Style tags in HTML document define layout properties, which should preferably be in external CSS files for better maintainability and performance
Les balises style dans le document HTML définissent des propriétés de mise en page qui devraient de préférence être dans des fichiers CSS externes pour une meilleure maintenabilité et performance
While layout CSS in <style> tags is less problematic than inline styles, using external CSS files provides better caching, allows CSS to be shared across pages, makes maintenance easier, enables better testing, and improves page load performance. Embedded <style> blocks increase HTML file size, prevent browser caching of styles, make it harder to implement site-wide design changes, and can create flash of unstyled content issues. External CSS also makes it easier to implement responsive design and media queries consistently.
Bien que le CSS de mise en page dans les balises <style> soit moins problématique que les styles en ligne, l'utilisation de fichiers CSS externes offre une meilleure mise en cache, permet au CSS d'être partagé entre les pages, facilite la maintenance, permet de meilleurs tests et améliore les performances de chargement des pages. Les blocs <style> intégrés augmentent la taille du fichier HTML, empêchent la mise en cache des styles par le navigateur, rendent plus difficile l'implémentation de changements de design à l'échelle du site et peuvent créer des problèmes d'affichage de contenu non stylé. Le CSS externe facilite également l'implémentation cohérente du design adaptatif et des requêtes média.
All users benefit from faster page loads through CSS caching, users on slow connections who download unnecessary CSS with every page, users who zoom or need responsive layouts that should be managed centrally, developers maintaining scattered style blocks across multiple pages, and users whose custom stylesheets work more predictably when site styles are in external files
Tous les utilisateurs bénéficient de chargements de pages plus rapides grâce à la mise en cache CSS, les utilisateurs avec des connexions lentes qui téléchargent du CSS inutile à chaque page, les utilisateurs qui zooment ou ont besoin de mises en page adaptatives qui devraient être gérées de manière centralisée, les développeurs maintenant des blocs de style dispersés sur plusieurs pages, et les utilisateurs dont les feuilles de style personnalisées fonctionnent de manière plus prévisible lorsque les styles du site sont dans des fichiers externes
Touchpoint Styles Styles
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 4 WCAG 4
Location
/html[1]/head[1]/style[3]
<style>
.has-text-align-justify{text-align:justify;}
</style>
Style tags in HTML document define layout properties, which should preferably be in external CSS files for better maintainability and performance
Les balises style dans le document HTML définissent des propriétés de mise en page qui devraient de préférence être dans des fichiers CSS externes pour une meilleure maintenabilité et performance
While layout CSS in <style> tags is less problematic than inline styles, using external CSS files provides better caching, allows CSS to be shared across pages, makes maintenance easier, enables better testing, and improves page load performance. Embedded <style> blocks increase HTML file size, prevent browser caching of styles, make it harder to implement site-wide design changes, and can create flash of unstyled content issues. External CSS also makes it easier to implement responsive design and media queries consistently.
Bien que le CSS de mise en page dans les balises <style> soit moins problématique que les styles en ligne, l'utilisation de fichiers CSS externes offre une meilleure mise en cache, permet au CSS d'être partagé entre les pages, facilite la maintenance, permet de meilleurs tests et améliore les performances de chargement des pages. Les blocs <style> intégrés augmentent la taille du fichier HTML, empêchent la mise en cache des styles par le navigateur, rendent plus difficile l'implémentation de changements de design à l'échelle du site et peuvent créer des problèmes d'affichage de contenu non stylé. Le CSS externe facilite également l'implémentation cohérente du design adaptatif et des requêtes média.
All users benefit from faster page loads through CSS caching, users on slow connections who download unnecessary CSS with every page, users who zoom or need responsive layouts that should be managed centrally, developers maintaining scattered style blocks across multiple pages, and users whose custom stylesheets work more predictably when site styles are in external files
Tous les utilisateurs bénéficient de chargements de pages plus rapides grâce à la mise en cache CSS, les utilisateurs avec des connexions lentes qui téléchargent du CSS inutile à chaque page, les utilisateurs qui zooment ou ont besoin de mises en page adaptatives qui devraient être gérées de manière centralisée, les développeurs maintenant des blocs de style dispersés sur plusieurs pages, et les utilisateurs dont les feuilles de style personnalisées fonctionnent de manière plus prévisible lorsque les styles du site sont dans des fichiers externes
Touchpoint Styles Styles
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 4 WCAG 4
Location
/html[1]/head[1]/style[7]
<style>
:root{--gs-colorone:#2184f9;--gs-colortwo:#e90000;--gs-colorthree:#2adb32;--gs-colorfour:#696cff;--gs-colorfive:#ff9800;}
</style>
Style tags in HTML document define layout properties, which should preferably be in external CSS files for better maintainability and performance
Les balises style dans le document HTML définissent des propriétés de mise en page qui devraient de préférence être dans des fichiers CSS externes pour une meilleure maintenabilité et performance
While layout CSS in <style> tags is less problematic than inline styles, using external CSS files provides better caching, allows CSS to be shared across pages, makes maintenance easier, enables better testing, and improves page load performance. Embedded <style> blocks increase HTML file size, prevent browser caching of styles, make it harder to implement site-wide design changes, and can create flash of unstyled content issues. External CSS also makes it easier to implement responsive design and media queries consistently.
Bien que le CSS de mise en page dans les balises <style> soit moins problématique que les styles en ligne, l'utilisation de fichiers CSS externes offre une meilleure mise en cache, permet au CSS d'être partagé entre les pages, facilite la maintenance, permet de meilleurs tests et améliore les performances de chargement des pages. Les blocs <style> intégrés augmentent la taille du fichier HTML, empêchent la mise en cache des styles par le navigateur, rendent plus difficile l'implémentation de changements de design à l'échelle du site et peuvent créer des problèmes d'affichage de contenu non stylé. Le CSS externe facilite également l'implémentation cohérente du design adaptatif et des requêtes média.
All users benefit from faster page loads through CSS caching, users on slow connections who download unnecessary CSS with every page, users who zoom or need responsive layouts that should be managed centrally, developers maintaining scattered style blocks across multiple pages, and users whose custom stylesheets work more predictably when site styles are in external files
Tous les utilisateurs bénéficient de chargements de pages plus rapides grâce à la mise en cache CSS, les utilisateurs avec des connexions lentes qui téléchargent du CSS inutile à chaque page, les utilisateurs qui zooment ou ont besoin de mises en page adaptatives qui devraient être gérées de manière centralisée, les développeurs maintenant des blocs de style dispersés sur plusieurs pages, et les utilisateurs dont les feuilles de style personnalisées fonctionnent de manière plus prévisible lorsque les styles du site sont dans des fichiers externes
Touchpoint Styles Styles
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 4 WCAG 4
Location
/html[1]/head[1]/style[10]
<style>
:root { --font-headings: unset; --font-base: unset; --font-headings-default: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; --font-base-default: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica N...</style>
Style tags in HTML document define layout properties, which should preferably be in external CSS files for better maintainability and performance
Les balises style dans le document HTML définissent des propriétés de mise en page qui devraient de préférence être dans des fichiers CSS externes pour une meilleure maintenabilité et performance
While layout CSS in <style> tags is less problematic than inline styles, using external CSS files provides better caching, allows CSS to be shared across pages, makes maintenance easier, enables better testing, and improves page load performance. Embedded <style> blocks increase HTML file size, prevent browser caching of styles, make it harder to implement site-wide design changes, and can create flash of unstyled content issues. External CSS also makes it easier to implement responsive design and media queries consistently.
Bien que le CSS de mise en page dans les balises <style> soit moins problématique que les styles en ligne, l'utilisation de fichiers CSS externes offre une meilleure mise en cache, permet au CSS d'être partagé entre les pages, facilite la maintenance, permet de meilleurs tests et améliore les performances de chargement des pages. Les blocs <style> intégrés augmentent la taille du fichier HTML, empêchent la mise en cache des styles par le navigateur, rendent plus difficile l'implémentation de changements de design à l'échelle du site et peuvent créer des problèmes d'affichage de contenu non stylé. Le CSS externe facilite également l'implémentation cohérente du design adaptatif et des requêtes média.
All users benefit from faster page loads through CSS caching, users on slow connections who download unnecessary CSS with every page, users who zoom or need responsive layouts that should be managed centrally, developers maintaining scattered style blocks across multiple pages, and users whose custom stylesheets work more predictably when site styles are in external files
Tous les utilisateurs bénéficient de chargements de pages plus rapides grâce à la mise en cache CSS, les utilisateurs avec des connexions lentes qui téléchargent du CSS inutile à chaque page, les utilisateurs qui zooment ou ont besoin de mises en page adaptatives qui devraient être gérées de manière centralisée, les développeurs maintenant des blocs de style dispersés sur plusieurs pages, et les utilisateurs dont les feuilles de style personnalisées fonctionnent de manière plus prévisible lorsque les styles du site sont dans des fichiers externes
Touchpoint Styles Styles
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 4 WCAG 4
Location
/html[1]/head[1]/style[11]
<style>img#wpstats{display:none}</style>
JavaScript detected on page
JavaScript détecté sur la page
Functionality should work without JavaScript
La fonctionnalité devrait fonctionner sans JavaScript
Users with JavaScript disabled
Utilisateurs avec JavaScript désactivé
Touchpoint Event Handling Gestion des événements
Impact Low Faible
Location
/html[1]/head[1]/script[1]
<script type="text/javascript" async="" charset="utf-8" src="https://www.gstatic.com/recaptcha/releases/cLm1zuaUXPLFw7nzKiQTH1dX/recaptcha__en.js" crossorigin="anonymous" integrity="sha384-gUsoa0ra1Yy
JavaScript detected on page
JavaScript détecté sur la page
Functionality should work without JavaScript
La fonctionnalité devrait fonctionner sans JavaScript
Users with JavaScript disabled
Utilisateurs avec JavaScript désactivé
Touchpoint Event Handling Gestion des événements
Impact Low Faible
Location
/html[1]/head[1]/script[2]
<script type="text/javascript">
var contactform = [];
var checkIfCalled = true;
var renderGoogleInvisibleRecaptchaFront = function() {
// prevent form submit from enter key
jQuery("input[n
JavaScript detected on page
JavaScript détecté sur la page
Functionality should work without JavaScript
La fonctionnalité devrait fonctionner sans JavaScript
Users with JavaScript disabled
Utilisateurs avec JavaScript désactivé
Touchpoint Event Handling Gestion des événements
Impact Low Faible
Location
/html[1]/head[1]/script[3]
<script src="https://www.google.com/recaptcha/api.js?onload=renderGoogleInvisibleRecaptchaFront&render=explicit" async="" defer=""></script>
JavaScript detected on page
JavaScript détecté sur la page
Functionality should work without JavaScript
La fonctionnalité devrait fonctionner sans JavaScript
Users with JavaScript disabled
Utilisateurs avec JavaScript désactivé
Touchpoint Event Handling Gestion des événements
Impact Low Faible
Location
/html[1]/head[1]/script[4]
<script type="application/ld+json" class="yoast-schema-graph">{"@context":"https://schema.org","@graph":[{"@type":"WebPage","@id":"https://cnib-accesslabs.ca/contact-us/","url":"https://cnib-accesslab
JavaScript detected on page
JavaScript détecté sur la page
Functionality should work without JavaScript
La fonctionnalité devrait fonctionner sans JavaScript
Users with JavaScript disabled
Utilisateurs avec JavaScript désactivé
Touchpoint Event Handling Gestion des événements
Impact Low Faible
Location
/html[1]/head[1]/script[5]
<script>
window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/16.0.1\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/16.0.1\/svg\/","svgExt":".svg","s
JavaScript detected on page
JavaScript détecté sur la page
Functionality should work without JavaScript
La fonctionnalité devrait fonctionner sans JavaScript
Users with JavaScript disabled
Utilisateurs avec JavaScript désactivé
Touchpoint Event Handling Gestion des événements
Impact Low Faible
Location
/html[1]/head[1]/script[6]
<script id="wpml-cookie-js-extra">
var wpml_cookies = {"wp-wpml_current_language":{"value":"en","expires":1,"path":"\/"}};
var wpml_cookies = {"wp-wpml_current_language":{"value":"en","expires":1,"pat
JavaScript detected on page
JavaScript détecté sur la page
Functionality should work without JavaScript
La fonctionnalité devrait fonctionner sans JavaScript
Users with JavaScript disabled
Utilisateurs avec JavaScript désactivé
Touchpoint Event Handling Gestion des événements
Impact Low Faible
Location
/html[1]/head[1]/script[7]
<script data-handles="wpml-cookie" type="text/javascript" src="https://cnib-accesslabs.ca/wp-content/plugins/sitepress-multilingual-cms/res/js/cookies/language-cookie.js?m=1699431499"></script>
JavaScript detected on page
JavaScript détecté sur la page
Functionality should work without JavaScript
La fonctionnalité devrait fonctionner sans JavaScript
Users with JavaScript disabled
Utilisateurs avec JavaScript désactivé
Touchpoint Event Handling Gestion des événements
Impact Low Faible
Location
/html[1]/head[1]/script[8]
<script id="jetpack-mu-wpcom-settings-js-before">
var JETPACK_MU_WPCOM_SETTINGS = {"assetsUrl":"https:\/\/cnib-accesslabs.ca\/wp-content\/mu-plugins\/wpcomsh\/jetpack_vendor\/automattic\/jetpack-mu-wp
JavaScript detected on page
JavaScript détecté sur la page
Functionality should work without JavaScript
La fonctionnalité devrait fonctionner sans JavaScript
Users with JavaScript disabled
Utilisateurs avec JavaScript désactivé
Touchpoint Event Handling Gestion des événements
Impact Low Faible
Location
/html[1]/head[1]/script[9]
<script src="https://cnib-accesslabs.ca/wp-includes/js/jquery/jquery.min.js?ver=3.7.1" id="jquery-core-js"></script>
JavaScript detected on page
JavaScript détecté sur la page
Functionality should work without JavaScript
La fonctionnalité devrait fonctionner sans JavaScript
Users with JavaScript disabled
Utilisateurs avec JavaScript désactivé
Touchpoint Event Handling Gestion des événements
Impact Low Faible
Location
/html[1]/head[1]/script[10]
<script data-handles="jquery-migrate,cf7_invisible_recaptcha_functions" type="text/javascript" src="https://cnib-accesslabs.ca/_static/??wp-includes/js/jquery/jquery-migrate.min.js,wp-content/plugins/
JavaScript detected on page
JavaScript détecté sur la page
Functionality should work without JavaScript
La fonctionnalité devrait fonctionner sans JavaScript
Users with JavaScript disabled
Utilisateurs avec JavaScript désactivé
Touchpoint Event Handling Gestion des événements
Impact Low Faible
Location
/html[1]/head[1]/script[11]
<script async="" src="https://www.googletagmanager.com/gtag/js?id=G-DHQX09YM5V"></script>
JavaScript detected on page
JavaScript détecté sur la page
Functionality should work without JavaScript
La fonctionnalité devrait fonctionner sans JavaScript
Users with JavaScript disabled
Utilisateurs avec JavaScript désactivé
Touchpoint Event Handling Gestion des événements
Impact Low Faible
Location
/html[1]/head[1]/script[12]
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-DHQX09YM5V');
</script>
JavaScript detected on page
JavaScript détecté sur la page
Functionality should work without JavaScript
La fonctionnalité devrait fonctionner sans JavaScript
Users with JavaScript disabled
Utilisateurs avec JavaScript désactivé
Touchpoint Event Handling Gestion des événements
Impact Low Faible
Location
/html[1]/head[1]/script[13]
<script async="" src="https://www.googletagmanager.com/gtag/js?id=G-DHQX09YM5V"></script>
JavaScript detected on page
JavaScript détecté sur la page
Functionality should work without JavaScript
La fonctionnalité devrait fonctionner sans JavaScript
Users with JavaScript disabled
Utilisateurs avec JavaScript désactivé
Touchpoint Event Handling Gestion des événements
Impact Low Faible
Location
/html[1]/head[1]/script[14]
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push( arguments ); }
gtag( 'js', new Date() );
gtag( 'config', "G-DHQX09YM5V" );
</script>
JavaScript detected on page
JavaScript détecté sur la page
Functionality should work without JavaScript
La fonctionnalité devrait fonctionner sans JavaScript
Users with JavaScript disabled
Utilisateurs avec JavaScript désactivé
Touchpoint Event Handling Gestion des événements
Impact Low Faible
Location
/html[1]/head[1]/script[15]
<script type="text/javascript">/////////////////////////////////////////////////////////////
// Calculation of the accessibe name
/////////////////////////////////////////////////////////////
/**
*
JavaScript detected on page
JavaScript détecté sur la page
Functionality should work without JavaScript
La fonctionnalité devrait fonctionner sans JavaScript
Users with JavaScript disabled
Utilisateurs avec JavaScript désactivé
Touchpoint Event Handling Gestion des événements
Impact Low Faible
Location
/html[1]/head[1]/script[16]
<script type="text/javascript">const ariaWidgetRoles = [
"button",
"checkbox",
"gridcell",
"link",
"menuitem",
"menuitemcheckbox",
"menuitemradio",
"option",
"prog
JavaScript detected on page
JavaScript détecté sur la page
Functionality should work without JavaScript
La fonctionnalité devrait fonctionner sans JavaScript
Users with JavaScript disabled
Utilisateurs avec JavaScript désactivé
Touchpoint Event Handling Gestion des événements
Impact Low Faible
Location
/html[1]/head[1]/script[17]
<script type="text/javascript">const cssColors = {
"aliceblue": "#f0f8ff",
"antiquewhite": "#faebd7",
"aqua": "#00ffff",
"aquamarine": "#7fffd4",
"azure": "#f0ffff",
"beige": "
JavaScript detected on page
JavaScript détecté sur la page
Functionality should work without JavaScript
La fonctionnalité devrait fonctionner sans JavaScript
Users with JavaScript disabled
Utilisateurs avec JavaScript désactivé
Touchpoint Event Handling Gestion des événements
Impact Low Faible
Location
/html[1]/head[1]/script[18]
<script type="text/javascript">// Copyright 2018 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
/**
JavaScript detected on page
JavaScript détecté sur la page
Functionality should work without JavaScript
La fonctionnalité devrait fonctionner sans JavaScript
Users with JavaScript disabled
Utilisateurs avec JavaScript désactivé
Touchpoint Event Handling Gestion des événements
Impact Low Faible
Location
/html[1]/head[1]/script[19]
<script type="text/javascript">const ERR = 0;
const WARN = 1;
class A11yCodes {
static Headings = {
HEADINGS_DONT_START_WITH_H1: { code:ERR, txt:"Heading levels do not start with an H1"},
JavaScript detected on page
JavaScript détecté sur la page
Functionality should work without JavaScript
La fonctionnalité devrait fonctionner sans JavaScript
Users with JavaScript disabled
Utilisateurs avec JavaScript désactivé
Touchpoint Event Handling Gestion des événements
Impact Low Faible
Location
/html[1]/head[1]/script[20]
<script type="text/javascript">/**
* Helper functions for pass tracking and applicability
* To be included in all test files
*/
/**
* Create a not applicable result for a test
* @param {string}
JavaScript detected on page
JavaScript détecté sur la page
Functionality should work without JavaScript
La fonctionnalité devrait fonctionner sans JavaScript
Users with JavaScript disabled
Utilisateurs avec JavaScript désactivé
Touchpoint Event Handling Gestion des événements
Impact Low Faible
Location
/html[1]/head[1]/script[21]
<script type="text/javascript">function pageTitleScrape() {
let errorList = [];
let passList = [];
let checks = [];
// Get title length limit from config, default to 60
const titl
JavaScript detected on page
JavaScript détecté sur la page
Functionality should work without JavaScript
La fonctionnalité devrait fonctionner sans JavaScript
Users with JavaScript disabled
Utilisateurs avec JavaScript désactivé
Touchpoint Event Handling Gestion des événements
Impact Low Faible
Location
/html[1]/head[1]/script[22]
<script type="text/javascript">function pdfScrape() {
let pdfList = [];
let elements = document.querySelectorAll("a[href]");
elements.forEach(element=>{
const href = element.getA
JavaScript detected on page
JavaScript détecté sur la page
Functionality should work without JavaScript
La fonctionnalité devrait fonctionner sans JavaScript
Users with JavaScript disabled
Utilisateurs avec JavaScript désactivé
Touchpoint Event Handling Gestion des événements
Impact Low Faible
Location
/html[1]/body[1]/main[1]/div[2]/div[1]/div[5]/form[1]/script[1]
<script type="text/javascript">
if(contactform === undefined){
var contactform = [];
}
var innerVal = [166,'mail_sent_ok','Thank you for your message. It has been sent.'];
JavaScript detected on page
JavaScript détecté sur la page
Functionality should work without JavaScript
La fonctionnalité devrait fonctionner sans JavaScript
Users with JavaScript disabled
Utilisateurs avec JavaScript désactivé
Touchpoint Event Handling Gestion des événements
Impact Low Faible
Location
/html[1]/body[1]/main[1]/div[2]/div[1]/div[5]/form[1]/p[7]/script[1]
<script>document.getElementById( "ak_js_1" ).setAttribute( "value", ( new Date() ).getTime() );</script>
JavaScript detected on page
JavaScript détecté sur la page
Functionality should work without JavaScript
La fonctionnalité devrait fonctionner sans JavaScript
Users with JavaScript disabled
Utilisateurs avec JavaScript désactivé
Touchpoint Event Handling Gestion des événements
Impact Low Faible
Location
/html[1]/body[1]/script[1]
<script type="speculationrules">
{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"\/*"},{"not":{"href_matches":["\/wp-*.php","\/wp-admin\/*","\/wp-content\/uploads\/*","\/wp-content\
JavaScript detected on page
JavaScript détecté sur la page
Functionality should work without JavaScript
La fonctionnalité devrait fonctionner sans JavaScript
Users with JavaScript disabled
Utilisateurs avec JavaScript désactivé
Touchpoint Event Handling Gestion des événements
Impact Low Faible
Location
/html[1]/body[1]/script[2]
<script defer="" src="https://s0.wp.com/wp-content/js/bilmur.min.js?m=202544"></script>
JavaScript detected on page
JavaScript détecté sur la page
Functionality should work without JavaScript
La fonctionnalité devrait fonctionner sans JavaScript
Users with JavaScript disabled
Utilisateurs avec JavaScript désactivé
Touchpoint Event Handling Gestion des événements
Impact Low Faible
Location
/html[1]/body[1]/script[3]
<script data-handles="wp-hooks" type="text/javascript" src="https://cnib-accesslabs.ca/wp-includes/js/dist/hooks.min.js?m=1727673091"></script>
JavaScript detected on page
JavaScript détecté sur la page
Functionality should work without JavaScript
La fonctionnalité devrait fonctionner sans JavaScript
Users with JavaScript disabled
Utilisateurs avec JavaScript désactivé
Touchpoint Event Handling Gestion des événements
Impact Low Faible
Location
/html[1]/body[1]/script[4]
<script src="https://cnib-accesslabs.ca/wp-includes/js/dist/i18n.min.js?ver=5e580eb46a90c2b997e6" id="wp-i18n-js"></script>
JavaScript detected on page
JavaScript détecté sur la page
Functionality should work without JavaScript
La fonctionnalité devrait fonctionner sans JavaScript
Users with JavaScript disabled
Utilisateurs avec JavaScript désactivé
Touchpoint Event Handling Gestion des événements
Impact Low Faible
Location
/html[1]/body[1]/script[5]
<script id="wp-i18n-js-after">
wp.i18n.setLocaleData( { 'text direction\u0004ltr': [ 'ltr' ] } );
</script>
JavaScript detected on page
JavaScript détecté sur la page
Functionality should work without JavaScript
La fonctionnalité devrait fonctionner sans JavaScript
Users with JavaScript disabled
Utilisateurs avec JavaScript désactivé
Touchpoint Event Handling Gestion des événements
Impact Low Faible
Location
/html[1]/body[1]/script[6]
<script data-handles="swv" type="text/javascript" src="https://cnib-accesslabs.ca/wp-content/plugins/contact-form-7/includes/swv/js/index.js?m=1761765395"></script>
JavaScript detected on page
JavaScript détecté sur la page
Functionality should work without JavaScript
La fonctionnalité devrait fonctionner sans JavaScript
Users with JavaScript disabled
Utilisateurs avec JavaScript désactivé
Touchpoint Event Handling Gestion des événements
Impact Low Faible
Location
/html[1]/body[1]/script[7]
<script id="contact-form-7-js-before">
var wpcf7 = {
"api": {
"root": "https:\/\/cnib-accesslabs.ca\/wp-json\/",
"namespace": "contact-form-7\/v1"
},
"cached": 1
};
</scrip
JavaScript detected on page
JavaScript détecté sur la page
Functionality should work without JavaScript
La fonctionnalité devrait fonctionner sans JavaScript
Users with JavaScript disabled
Utilisateurs avec JavaScript désactivé
Touchpoint Event Handling Gestion des événements
Impact Low Faible
Location
/html[1]/body[1]/script[8]
<script src="https://cnib-accesslabs.ca/wp-content/plugins/contact-form-7/includes/js/index.js?ver=6.1.3" id="contact-form-7-js"></script>
JavaScript detected on page
JavaScript détecté sur la page
Functionality should work without JavaScript
La fonctionnalité devrait fonctionner sans JavaScript
Users with JavaScript disabled
Utilisateurs avec JavaScript désactivé
Touchpoint Event Handling Gestion des événements
Impact Low Faible
Location
/html[1]/body[1]/script[9]
<script data-handles="seedlet-primary-navigation-script,jcookie-js,default-js" type="text/javascript" src="https://cnib-accesslabs.ca/_static/??-eJyNy0EOgkAMRuELCVUSTGZhPEsdfrQjM4NtkXB7ce3G7cv71rmJtTi
JavaScript detected on page
JavaScript détecté sur la page
Functionality should work without JavaScript
La fonctionnalité devrait fonctionner sans JavaScript
Users with JavaScript disabled
Utilisateurs avec JavaScript désactivé
Touchpoint Event Handling Gestion des événements
Impact Low Faible
Location
/html[1]/body[1]/script[10]
<script id="jetpack-stats-js-before">
_stq = window._stq || [];
_stq.push([ "view", JSON.parse("{\"v\":\"ext\",\"blog\":\"211029720\",\"post\":\"16\",\"tz\":\"-4\",\"srv\":\"cnib-accesslabs.ca\",\"hp\
JavaScript detected on page
JavaScript détecté sur la page
Functionality should work without JavaScript
La fonctionnalité devrait fonctionner sans JavaScript
Users with JavaScript disabled
Utilisateurs avec JavaScript désactivé
Touchpoint Event Handling Gestion des événements
Impact Low Faible
Location
/html[1]/body[1]/script[11]
<script src="https://stats.wp.com/e-202544.js" id="jetpack-stats-js" defer="" data-wp-strategy="defer"></script>
JavaScript detected on page
JavaScript détecté sur la page
Functionality should work without JavaScript
La fonctionnalité devrait fonctionner sans JavaScript
Users with JavaScript disabled
Utilisateurs avec JavaScript désactivé
Touchpoint Event Handling Gestion des événements
Impact Low Faible
Location
/html[1]/body[1]/script[12]
<script defer="" data-handles="akismet-frontend" type="text/javascript" src="https://cnib-accesslabs.ca/wp-content/plugins/akismet/_inc/akismet-frontend.js?m=1704837122"></script>
JavaScript detected on page
JavaScript détecté sur la page
Functionality should work without JavaScript
La fonctionnalité devrait fonctionner sans JavaScript
Users with JavaScript disabled
Utilisateurs avec JavaScript désactivé
Touchpoint Event Handling Gestion des événements
Impact Low Faible
Location
/html[1]/body[1]/script[13]
<script>
/(trident|msie)/i.test(navigator.userAgent)&&document.getElementById&&window.addEventListener&&window.addEventListener("hashchange",function(){var t,e=location.hash.substring(1);/^[A-z0-9_-]
Font '%(fontName)s' is used at %(sizeCount)s %(sizeCount_singular_size)s on this page: %(fontSizes_list)s
La police '%(fontName)s' est utilisée à %(sizeCount)s %(sizeCount_singular_size)s sur cette page : %(fontSizes_list)s
Tracking font usage helps identify typography choices that may affect readability. While not inherently an accessibility issue, certain fonts can be harder to read for users with dyslexia, low vision, or reading disabilities. This discovery item documents which fonts are in use and at what sizes so they can be evaluated for legibility, character distinction, and overall readability as part of a comprehensive accessibility review.
Le suivi de l'utilisation des polices aide à identifier les choix typographiques qui peuvent affecter la lisibilité. Bien que ce ne soit pas intrinsèquement un problème d'accessibilité, certaines polices peuvent être plus difficiles à lire pour les utilisateurs dyslexiques, malvoyants ou ayant des troubles de la lecture. Cet élément de découverte documente quelles polices sont utilisées et à quelles tailles afin qu'elles puissent être évaluées pour la lisibilité, la distinction des caractères et la lisibilité globale dans le cadre d'une révision d'accessibilité complète.
This information helps accessibility auditors and developers understand the typography landscape of the page, particularly relevant for users with dyslexia who benefit from clear sans-serif fonts, users with low vision who need good character distinction, and users with reading disabilities who benefit from consistent, readable typefaces
Cette information aide les auditeurs d'accessibilité et les développeurs à comprendre le paysage typographique de la page, particulièrement pertinent pour les utilisateurs dyslexiques qui bénéficient de polices sans-serif claires, les utilisateurs malvoyants qui ont besoin d'une bonne distinction des caractères, et les utilisateurs ayant des troubles de la lecture qui bénéficient de polices cohérentes et lisibles
Touchpoint Fonts Polices
Impact Low Faible
Location
/html[1]
<meta>Font: Stag Sans</meta>
A form has been detected on this page with %(fieldCount)s field%(fieldCount_plural)s (%(fieldTypes_summary)s). The form submits to '%(formAction)s' using %(formMethod)s method. Form signature %(formSignature)s allows tracking this same form across different pages.
A form has been detected on this page with %(fieldCount)s field%(fieldCount_plural)s (%(fieldTypes_summary)s). The form submits to '%(formAction)s' using %(formMethod)s method. Form signature %(formSignature)s allows tracking this same form across different pages.
Forms are critical interactive components that require comprehensive manual accessibility testing beyond what automated tools can verify. Every form must be tested with keyboard navigation (tab order, enter/space activation, escape to cancel), screen readers (field labels announced correctly, error messages associated with fields, required fields indicated), and various input methods. Forms with poor accessibility create significant barriers - unlabeled fields leave users guessing what to enter, poor error handling prevents users from completing tasks, and keyboard traps can make forms completely unusable. Search forms are especially important as they provide a critical navigation mechanism - users rely on them to find content quickly, and screen reader users often navigate directly to search landmarks. The form signature allows auditors to recognize when the same form appears on multiple pages, ensuring consistent testing and remediation across the site.
Les formulaires sont des composants interactifs critiques qui nécessitent des tests d'accessibilité manuels complets au-delà de ce que les outils automatisés peuvent vérifier. Chaque formulaire doit être testé avec la navigation au clavier (ordre de tabulation, activation entrée/espace, échappement pour annuler), les lecteurs d'écran (étiquettes de champs annoncées correctement, messages d'erreur associés aux champs, champs requis indiqués), et diverses méthodes de saisie. Les formulaires avec une mauvaise accessibilité créent des barrières importantes - les champs non étiquetés laissent les utilisateurs deviner quoi saisir, une mauvaise gestion des erreurs empêche les utilisateurs de terminer les tâches, et les pièges au clavier peuvent rendre les formulaires complètement inutilisables. Les formulaires de recherche sont particulièrement importants car ils fournissent un mécanisme de navigation critique - les utilisateurs s'appuient sur eux pour trouver du contenu rapidement, et les utilisateurs de lecteurs d'écran naviguent souvent directement vers les régions repères de recherche. La signature de formulaire permet aux auditeurs de reconnaître quand le même formulaire apparaît sur plusieurs pages, assurant des tests et une remédiation cohérents sur l'ensemble du site.
Screen reader users who need properly labeled form controls and error associations, keyboard-only users who must navigate and submit forms without a mouse, users with motor disabilities who need adequate time limits and clear focus indicators, users with cognitive disabilities who need clear instructions and helpful error messages, voice control users who need properly exposed form control names, mobile users who need forms that work with assistive technologies on touch devices, and screen reader users who use landmark navigation to jump directly to search forms
Utilisateurs de lecteurs d'écran qui ont besoin de contrôles de formulaire correctement étiquetés et d'associations d'erreurs, utilisateurs de clavier uniquement qui doivent naviguer et soumettre des formulaires sans souris, utilisateurs avec des handicaps moteurs qui ont besoin de délais suffisants et d'indicateurs de focus clairs, utilisateurs avec des handicaps cognitifs qui ont besoin d'instructions claires et de messages d'erreur utiles, utilisateurs de contrôle vocal qui ont besoin de noms de contrôles de formulaire correctement exposés, utilisateurs mobiles qui ont besoin de formulaires fonctionnant avec les technologies d'assistance sur appareils tactiles, et utilisateurs de lecteurs d'écran qui utilisent la navigation par régions repères pour accéder directement aux formulaires de recherche
Touchpoint Forms Formulaires
Impact Low Faible
WCAG , WCAG ,
WCAG , WCAG ,
WCAG , WCAG ,
WCAG , WCAG ,
WCAG , WCAG ,
WCAG , WCAG ,
WCAG , WCAG ,
WCAG , WCAG ,
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 2 WCAG 2
WCAG 2 WCAG 2
WCAG 2 WCAG 2
WCAG 2 WCAG 2
WCAG 2 WCAG 2
WCAG 2 WCAG 2
WCAG 3 WCAG 3
WCAG 3 WCAG 3
WCAG 3 WCAG 3
WCAG 3 WCAG 3
WCAG 3 WCAG 3
WCAG 3 WCAG 3
WCAG 3 WCAG 3
WCAG 3 WCAG 3
WCAG 3 WCAG 3
WCAG 3 WCAG 3
WCAG 3 WCAG 3
WCAG 3 WCAG 3
WCAG 4 WCAG 4
WCAG 4 WCAG 4
Location
/html[1]/body[1]/main[1]/div[2]/div[1]/div[5]/form[1]
<form action="/contact-us/#wpcf7-f166-p16-o1" method="post" class="wpcf7-form init" aria-label="Contact form" novalidate="novalidate" data-status="init">
<fieldset class="hidden-fields-container"><inp
Form may lack clear submit button
Le formulaire peut manquer d'un bouton d'envoi clair
Users may not know how to submit the form
Les utilisateurs peuvent ne pas savoir comment soumettre le formulaire
Users with cognitive disabilities, keyboard users
Utilisateurs avec des déficiences cognitives, utilisateurs de clavier
Touchpoint Forms Formulaires
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 2 WCAG 2
WCAG 3 WCAG 3
Location
/html[1]/body[1]/main[1]/div[2]/div[1]/div[5]/form[1]
<form action="/contact-us/#wpcf7-f166-p16-o1" method="post" class="wpcf7-form init" aria-label="Contact form" novalidate="novalidate" data-status="init">
<fieldset class="hidden-fields-container"><inp
Heading element has an ID attribute that may be used for in-page navigation
L'élément de titre possède un attribut ID qui peut être utilisé pour la navigation dans la page
Headings with IDs are often link targets for navigation, requiring verification that they work correctly and provide meaningful navigation points.
Les titres avec des ID sont souvent des cibles de liens pour la navigation, nécessitant une vérification qu'ils fonctionnent correctement et fournissent des points de navigation significatifs.
All users who use in-page navigation links, screen reader users who navigate by headings, keyboard users who follow fragment links.
Tous les utilisateurs qui utilisent des liens de navigation dans la page, utilisateurs de lecteurs d'écran qui naviguent par titres, utilisateurs de clavier qui suivent les liens de fragment.
Touchpoint Headings Titres
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
Location
/html[1]/body[1]/main[1]/div[1]/div[1]/h1[1]
<h1 id="headline" class="page-title">Contact Us</h1>
Heading element has an ID attribute that may be used for in-page navigation
L'élément de titre possède un attribut ID qui peut être utilisé pour la navigation dans la page
Headings with IDs are often link targets for navigation, requiring verification that they work correctly and provide meaningful navigation points.
Les titres avec des ID sont souvent des cibles de liens pour la navigation, nécessitant une vérification qu'ils fonctionnent correctement et fournissent des points de navigation significatifs.
All users who use in-page navigation links, screen reader users who navigate by headings, keyboard users who follow fragment links.
Tous les utilisateurs qui utilisent des liens de navigation dans la page, utilisateurs de lecteurs d'écran qui naviguent par titres, utilisateurs de clavier qui suivent les liens de fragment.
Touchpoint Headings Titres
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
Location
/html[1]/body[1]/footer[1]/div[1]/div[1]/div[1]/h2[1]
<h2 class="wp-block-heading has-h-3-font-size" id="subscribe-to-our-newsletter"><strong>Subscribe to our newsletter</strong></h2>
Heading element has an ID attribute that may be used for in-page navigation
L'élément de titre possède un attribut ID qui peut être utilisé pour la navigation dans la page
Headings with IDs are often link targets for navigation, requiring verification that they work correctly and provide meaningful navigation points.
Les titres avec des ID sont souvent des cibles de liens pour la navigation, nécessitant une vérification qu'ils fonctionnent correctement et fournissent des points de navigation significatifs.
All users who use in-page navigation links, screen reader users who navigate by headings, keyboard users who follow fragment links.
Tous les utilisateurs qui utilisent des liens de navigation dans la page, utilisateurs de lecteurs d'écran qui naviguent par titres, utilisateurs de clavier qui suivent les liens de fragment.
Touchpoint Headings Titres
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
Location
/html[1]/body[1]/footer[1]/div[2]/h2[1]
<h2 class="screen-reader-text">Footer</h2>
Heading element has an ID attribute that may be used for in-page navigation
L'élément de titre possède un attribut ID qui peut être utilisé pour la navigation dans la page
Headings with IDs are often link targets for navigation, requiring verification that they work correctly and provide meaningful navigation points.
Les titres avec des ID sont souvent des cibles de liens pour la navigation, nécessitant une vérification qu'ils fonctionnent correctement et fournissent des points de navigation significatifs.
All users who use in-page navigation links, screen reader users who navigate by headings, keyboard users who follow fragment links.
Tous les utilisateurs qui utilisent des liens de navigation dans la page, utilisateurs de lecteurs d'écran qui naviguent par titres, utilisateurs de clavier qui suivent les liens de fragment.
Touchpoint Headings Titres
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[1]/h3[1]
<h3 class="has-h-4-font-size english-only" id="have-a-questions-contact-us"><strong>Have any questions? Contact Us!</strong></h3>
Heading element has an ID attribute that may be used for in-page navigation
L'élément de titre possède un attribut ID qui peut être utilisé pour la navigation dans la page
Headings with IDs are often link targets for navigation, requiring verification that they work correctly and provide meaningful navigation points.
Les titres avec des ID sont souvent des cibles de liens pour la navigation, nécessitant une vérification qu'ils fonctionnent correctement et fournissent des points de navigation significatifs.
All users who use in-page navigation links, screen reader users who navigate by headings, keyboard users who follow fragment links.
Tous les utilisateurs qui utilisent des liens de navigation dans la page, utilisateurs de lecteurs d'écran qui naviguent par titres, utilisateurs de clavier qui suivent les liens de fragment.
Touchpoint Headings Titres
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[2]/h3[1]
<h3 class="has-h-4-font-size french-only" id="have-a-questions-contact-us"><strong>Vous avez des questions? Contactez nous!</strong></h3>
Heading element has an ID attribute that may be used for in-page navigation
L'élément de titre possède un attribut ID qui peut être utilisé pour la navigation dans la page
Headings with IDs are often link targets for navigation, requiring verification that they work correctly and provide meaningful navigation points.
Les titres avec des ID sont souvent des cibles de liens pour la navigation, nécessitant une vérification qu'ils fonctionnent correctement et fournissent des points de navigation significatifs.
All users who use in-page navigation links, screen reader users who navigate by headings, keyboard users who follow fragment links.
Tous les utilisateurs qui utilisent des liens de navigation dans la page, utilisateurs de lecteurs d'écran qui naviguent par titres, utilisateurs de clavier qui suivent les liens de fragment.
Touchpoint Headings Titres
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[7]/h3[1]
<h3 id="we-are-proud-partners-of" class="has-h-4-font-size english-only"><strong>Our Partner Organizations</strong></h3>
Heading element has an ID attribute that may be used for in-page navigation
L'élément de titre possède un attribut ID qui peut être utilisé pour la navigation dans la page
Headings with IDs are often link targets for navigation, requiring verification that they work correctly and provide meaningful navigation points.
Les titres avec des ID sont souvent des cibles de liens pour la navigation, nécessitant une vérification qu'ils fonctionnent correctement et fournissent des points de navigation significatifs.
All users who use in-page navigation links, screen reader users who navigate by headings, keyboard users who follow fragment links.
Tous les utilisateurs qui utilisent des liens de navigation dans la page, utilisateurs de lecteurs d'écran qui naviguent par titres, utilisateurs de clavier qui suivent les liens de fragment.
Touchpoint Headings Titres
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[8]/h3[1]
<h3 id="we-are-proud-partners-of" class="has-h-4-font-size french-only"><strong>Nous sommes fiers d'être partenaires de</strong></h3>
Inline SVG element detected that requires manual review to determine appropriate accessibility implementation based on its purpose and complexity
Élément SVG intégré détecté nécessitant une révision manuelle pour déterminer l'implémentation d'accessibilité appropriée selon son objectif et sa complexité
SVG elements serve diverse purposes from simple icons to complex interactive visualizations, each requiring different accessibility approaches. A decorative border needs different treatment than a data chart, which differs from an interactive map or scientific simulation. Automated tools cannot determine SVG purpose, whether it's decorative or informative, static or interactive, or if existing accessibility features adequately support user needs.
Les éléments SVG servent des objectifs divers, des icônes simples aux visualisations interactives complexes, chacun nécessitant des approches d'accessibilité différentes. Une bordure décorative nécessite un traitement différent d'un graphique de données, qui diffère d'une carte interactive ou d'une simulation scientifique. Les outils automatisés ne peuvent pas déterminer l'objectif du SVG, s'il est décoratif ou informatif, statique ou interactif, ou si les fonctionnalités d'accessibilité existantes soutiennent adéquatement les besoins des utilisateurs.
Blind and low vision users using screen readers who need text alternatives for graphics or keyboard access to interactive elements, users with motor disabilities who require keyboard navigation for interactive SVG controls, users with cognitive disabilities who benefit from clear labeling and predictable interaction patterns, and users of various assistive technologies that may interpret SVG content differently
Utilisateurs aveugles et malvoyants utilisant des lecteurs d'écran qui ont besoin de textes alternatifs pour les graphiques ou d'un accès clavier aux éléments interactifs, utilisateurs avec des handicaps moteurs qui nécessitent une navigation au clavier pour les contrôles SVG interactifs, utilisateurs avec des handicaps cognitifs qui bénéficient d'un étiquetage clair et de modèles d'interaction prévisibles, et utilisateurs de diverses technologies d'assistance qui peuvent interpréter le contenu SVG différemment
Touchpoint Images Images
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
Location
/html[1]/body[1]/main[1]/div[2]/div[1]/div[3]/div[1]/span[1]/svg[1]
<svg class="" style="display:inline-block;vertical-align:middle" width="18" height="18" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path style="fill:#565D66" d="M953 45.8l-188.4-43.4c-
Inline SVG element detected that requires manual review to determine appropriate accessibility implementation based on its purpose and complexity
Élément SVG intégré détecté nécessitant une révision manuelle pour déterminer l'implémentation d'accessibilité appropriée selon son objectif et sa complexité
SVG elements serve diverse purposes from simple icons to complex interactive visualizations, each requiring different accessibility approaches. A decorative border needs different treatment than a data chart, which differs from an interactive map or scientific simulation. Automated tools cannot determine SVG purpose, whether it's decorative or informative, static or interactive, or if existing accessibility features adequately support user needs.
Les éléments SVG servent des objectifs divers, des icônes simples aux visualisations interactives complexes, chacun nécessitant des approches d'accessibilité différentes. Une bordure décorative nécessite un traitement différent d'un graphique de données, qui diffère d'une carte interactive ou d'une simulation scientifique. Les outils automatisés ne peuvent pas déterminer l'objectif du SVG, s'il est décoratif ou informatif, statique ou interactif, ou si les fonctionnalités d'accessibilité existantes soutiennent adéquatement les besoins des utilisateurs.
Blind and low vision users using screen readers who need text alternatives for graphics or keyboard access to interactive elements, users with motor disabilities who require keyboard navigation for interactive SVG controls, users with cognitive disabilities who benefit from clear labeling and predictable interaction patterns, and users of various assistive technologies that may interpret SVG content differently
Utilisateurs aveugles et malvoyants utilisant des lecteurs d'écran qui ont besoin de textes alternatifs pour les graphiques ou d'un accès clavier aux éléments interactifs, utilisateurs avec des handicaps moteurs qui nécessitent une navigation au clavier pour les contrôles SVG interactifs, utilisateurs avec des handicaps cognitifs qui bénéficient d'un étiquetage clair et de modèles d'interaction prévisibles, et utilisateurs de diverses technologies d'assistance qui peuvent interpréter le contenu SVG différemment
Touchpoint Images Images
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
Location
/html[1]/body[1]/main[1]/div[2]/div[1]/div[3]/div[2]/span[1]/svg[1]
<svg class="" style="display:inline-block;vertical-align:middle" width="18" height="18" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path style="fill:#565D66" d="M928 128h-832c-53 0-96
Inline SVG element detected that requires manual review to determine appropriate accessibility implementation based on its purpose and complexity
Élément SVG intégré détecté nécessitant une révision manuelle pour déterminer l'implémentation d'accessibilité appropriée selon son objectif et sa complexité
SVG elements serve diverse purposes from simple icons to complex interactive visualizations, each requiring different accessibility approaches. A decorative border needs different treatment than a data chart, which differs from an interactive map or scientific simulation. Automated tools cannot determine SVG purpose, whether it's decorative or informative, static or interactive, or if existing accessibility features adequately support user needs.
Les éléments SVG servent des objectifs divers, des icônes simples aux visualisations interactives complexes, chacun nécessitant des approches d'accessibilité différentes. Une bordure décorative nécessite un traitement différent d'un graphique de données, qui diffère d'une carte interactive ou d'une simulation scientifique. Les outils automatisés ne peuvent pas déterminer l'objectif du SVG, s'il est décoratif ou informatif, statique ou interactif, ou si les fonctionnalités d'accessibilité existantes soutiennent adéquatement les besoins des utilisateurs.
Blind and low vision users using screen readers who need text alternatives for graphics or keyboard access to interactive elements, users with motor disabilities who require keyboard navigation for interactive SVG controls, users with cognitive disabilities who benefit from clear labeling and predictable interaction patterns, and users of various assistive technologies that may interpret SVG content differently
Utilisateurs aveugles et malvoyants utilisant des lecteurs d'écran qui ont besoin de textes alternatifs pour les graphiques ou d'un accès clavier aux éléments interactifs, utilisateurs avec des handicaps moteurs qui nécessitent une navigation au clavier pour les contrôles SVG interactifs, utilisateurs avec des handicaps cognitifs qui bénéficient d'un étiquetage clair et de modèles d'interaction prévisibles, et utilisateurs de diverses technologies d'assistance qui peuvent interpréter le contenu SVG différemment
Touchpoint Images Images
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[1]/div[5]/ul[1]/li[1]/a[1]/svg[1]
<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" role="img"><path d="M12 2C6.5 2 2 6.5 2 12c0 5 3.7 9.1 8.4 9.9v-7H
Inline SVG element detected that requires manual review to determine appropriate accessibility implementation based on its purpose and complexity
Élément SVG intégré détecté nécessitant une révision manuelle pour déterminer l'implémentation d'accessibilité appropriée selon son objectif et sa complexité
SVG elements serve diverse purposes from simple icons to complex interactive visualizations, each requiring different accessibility approaches. A decorative border needs different treatment than a data chart, which differs from an interactive map or scientific simulation. Automated tools cannot determine SVG purpose, whether it's decorative or informative, static or interactive, or if existing accessibility features adequately support user needs.
Les éléments SVG servent des objectifs divers, des icônes simples aux visualisations interactives complexes, chacun nécessitant des approches d'accessibilité différentes. Une bordure décorative nécessite un traitement différent d'un graphique de données, qui diffère d'une carte interactive ou d'une simulation scientifique. Les outils automatisés ne peuvent pas déterminer l'objectif du SVG, s'il est décoratif ou informatif, statique ou interactif, ou si les fonctionnalités d'accessibilité existantes soutiennent adéquatement les besoins des utilisateurs.
Blind and low vision users using screen readers who need text alternatives for graphics or keyboard access to interactive elements, users with motor disabilities who require keyboard navigation for interactive SVG controls, users with cognitive disabilities who benefit from clear labeling and predictable interaction patterns, and users of various assistive technologies that may interpret SVG content differently
Utilisateurs aveugles et malvoyants utilisant des lecteurs d'écran qui ont besoin de textes alternatifs pour les graphiques ou d'un accès clavier aux éléments interactifs, utilisateurs avec des handicaps moteurs qui nécessitent une navigation au clavier pour les contrôles SVG interactifs, utilisateurs avec des handicaps cognitifs qui bénéficient d'un étiquetage clair et de modèles d'interaction prévisibles, et utilisateurs de diverses technologies d'assistance qui peuvent interpréter le contenu SVG différemment
Touchpoint Images Images
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[1]/div[5]/ul[1]/li[2]/a[1]/svg[1]
<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" role="img"><path d="M13.982 10.622 20.54 3h-1.554l-5.693 6.618L8.7
Inline SVG element detected that requires manual review to determine appropriate accessibility implementation based on its purpose and complexity
Élément SVG intégré détecté nécessitant une révision manuelle pour déterminer l'implémentation d'accessibilité appropriée selon son objectif et sa complexité
SVG elements serve diverse purposes from simple icons to complex interactive visualizations, each requiring different accessibility approaches. A decorative border needs different treatment than a data chart, which differs from an interactive map or scientific simulation. Automated tools cannot determine SVG purpose, whether it's decorative or informative, static or interactive, or if existing accessibility features adequately support user needs.
Les éléments SVG servent des objectifs divers, des icônes simples aux visualisations interactives complexes, chacun nécessitant des approches d'accessibilité différentes. Une bordure décorative nécessite un traitement différent d'un graphique de données, qui diffère d'une carte interactive ou d'une simulation scientifique. Les outils automatisés ne peuvent pas déterminer l'objectif du SVG, s'il est décoratif ou informatif, statique ou interactif, ou si les fonctionnalités d'accessibilité existantes soutiennent adéquatement les besoins des utilisateurs.
Blind and low vision users using screen readers who need text alternatives for graphics or keyboard access to interactive elements, users with motor disabilities who require keyboard navigation for interactive SVG controls, users with cognitive disabilities who benefit from clear labeling and predictable interaction patterns, and users of various assistive technologies that may interpret SVG content differently
Utilisateurs aveugles et malvoyants utilisant des lecteurs d'écran qui ont besoin de textes alternatifs pour les graphiques ou d'un accès clavier aux éléments interactifs, utilisateurs avec des handicaps moteurs qui nécessitent une navigation au clavier pour les contrôles SVG interactifs, utilisateurs avec des handicaps cognitifs qui bénéficient d'un étiquetage clair et de modèles d'interaction prévisibles, et utilisateurs de diverses technologies d'assistance qui peuvent interpréter le contenu SVG différemment
Touchpoint Images Images
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[1]/div[5]/ul[1]/li[3]/a[1]/svg[1]
<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" role="img"><path d="M21.8,8.001c0,0-0.195-1.378-0.795-1.985c-0.76-
Inline SVG element detected that requires manual review to determine appropriate accessibility implementation based on its purpose and complexity
Élément SVG intégré détecté nécessitant une révision manuelle pour déterminer l'implémentation d'accessibilité appropriée selon son objectif et sa complexité
SVG elements serve diverse purposes from simple icons to complex interactive visualizations, each requiring different accessibility approaches. A decorative border needs different treatment than a data chart, which differs from an interactive map or scientific simulation. Automated tools cannot determine SVG purpose, whether it's decorative or informative, static or interactive, or if existing accessibility features adequately support user needs.
Les éléments SVG servent des objectifs divers, des icônes simples aux visualisations interactives complexes, chacun nécessitant des approches d'accessibilité différentes. Une bordure décorative nécessite un traitement différent d'un graphique de données, qui diffère d'une carte interactive ou d'une simulation scientifique. Les outils automatisés ne peuvent pas déterminer l'objectif du SVG, s'il est décoratif ou informatif, statique ou interactif, ou si les fonctionnalités d'accessibilité existantes soutiennent adéquatement les besoins des utilisateurs.
Blind and low vision users using screen readers who need text alternatives for graphics or keyboard access to interactive elements, users with motor disabilities who require keyboard navigation for interactive SVG controls, users with cognitive disabilities who benefit from clear labeling and predictable interaction patterns, and users of various assistive technologies that may interpret SVG content differently
Utilisateurs aveugles et malvoyants utilisant des lecteurs d'écran qui ont besoin de textes alternatifs pour les graphiques ou d'un accès clavier aux éléments interactifs, utilisateurs avec des handicaps moteurs qui nécessitent une navigation au clavier pour les contrôles SVG interactifs, utilisateurs avec des handicaps cognitifs qui bénéficient d'un étiquetage clair et de modèles d'interaction prévisibles, et utilisateurs de diverses technologies d'assistance qui peuvent interpréter le contenu SVG différemment
Touchpoint Images Images
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[1]/div[5]/ul[1]/li[4]/a[1]/svg[1]
<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" role="img"><path d="M12,4.622c2.403,0,2.688,0.009,3.637,0.052c0.87
Inline SVG element detected that requires manual review to determine appropriate accessibility implementation based on its purpose and complexity
Élément SVG intégré détecté nécessitant une révision manuelle pour déterminer l'implémentation d'accessibilité appropriée selon son objectif et sa complexité
SVG elements serve diverse purposes from simple icons to complex interactive visualizations, each requiring different accessibility approaches. A decorative border needs different treatment than a data chart, which differs from an interactive map or scientific simulation. Automated tools cannot determine SVG purpose, whether it's decorative or informative, static or interactive, or if existing accessibility features adequately support user needs.
Les éléments SVG servent des objectifs divers, des icônes simples aux visualisations interactives complexes, chacun nécessitant des approches d'accessibilité différentes. Une bordure décorative nécessite un traitement différent d'un graphique de données, qui diffère d'une carte interactive ou d'une simulation scientifique. Les outils automatisés ne peuvent pas déterminer l'objectif du SVG, s'il est décoratif ou informatif, statique ou interactif, ou si les fonctionnalités d'accessibilité existantes soutiennent adéquatement les besoins des utilisateurs.
Blind and low vision users using screen readers who need text alternatives for graphics or keyboard access to interactive elements, users with motor disabilities who require keyboard navigation for interactive SVG controls, users with cognitive disabilities who benefit from clear labeling and predictable interaction patterns, and users of various assistive technologies that may interpret SVG content differently
Utilisateurs aveugles et malvoyants utilisant des lecteurs d'écran qui ont besoin de textes alternatifs pour les graphiques ou d'un accès clavier aux éléments interactifs, utilisateurs avec des handicaps moteurs qui nécessitent une navigation au clavier pour les contrôles SVG interactifs, utilisateurs avec des handicaps cognitifs qui bénéficient d'un étiquetage clair et de modèles d'interaction prévisibles, et utilisateurs de diverses technologies d'assistance qui peuvent interpréter le contenu SVG différemment
Touchpoint Images Images
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[1]/div[5]/ul[1]/li[5]/a[1]/svg[1]
<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" role="img"><path d="M19.7,3H4.3C3.582,3,3,3.582,3,4.3v15.4C3,20.41
SVG element with role="img" detected that requires manual review to verify appropriate text alternatives are provided
Élément SVG avec role="img" détecté nécessitant une révision manuelle pour vérifier que des textes alternatifs appropriés sont fournis
SVG elements with role="img" are explicitly marked as images and treated as a single graphic by assistive technologies, requiring appropriate text alternatives. While the role="img" indicates developer awareness of accessibility needs, manual review is needed to verify that any aria-label, aria-labelledby, or internal <title> elements adequately describe the image's content or function, and that the description is appropriate for the SVG's context and purpose.
Les éléments SVG avec role="img" sont explicitement marqués comme images et traités comme un graphique unique par les technologies d'assistance, nécessitant des textes alternatifs appropriés. Bien que le role="img" indique la sensibilisation du développeur aux besoins d'accessibilité, une révision manuelle est nécessaire pour vérifier que tout aria-label, aria-labelledby, ou éléments <title> internes décrivent adéquatement le contenu ou la fonction de l'image, et que la description est appropriée pour le contexte et l'objectif du SVG.
Blind and low vision users using screen readers who depend on text alternatives to understand image content, users with cognitive disabilities who benefit from clear, concise descriptions of visual information, keyboard users who may encounter the SVG in their navigation flow, and users of assistive technologies that treat role="img" SVGs as atomic image elements
Utilisateurs aveugles et malvoyants utilisant des lecteurs d'écran qui dépendent des textes alternatifs pour comprendre le contenu des images, utilisateurs avec des handicaps cognitifs qui bénéficient de descriptions claires et concises de l'information visuelle, utilisateurs de clavier qui peuvent rencontrer le SVG dans leur flux de navigation, et utilisateurs de technologies d'assistance qui traitent les SVG avec role="img" comme des éléments d'image atomiques
Touchpoint Images Images
Impact Low Faible
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
Location
/html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[1]/div[1]/figure[1]/img[1]
<img loading="lazy" decoding="async" width="100" height="100" src="https://cnib-accesslabs.ca/wp-content/uploads//CNIB-Footer.svg" alt="CNIB" class="wp-image-39" style="width:300px;height:109px">
A contentinfo landmark (<footer> at top level or role="contentinfo") has been detected on this page. %(footerLabel_description)s Signature %(footerSignature)s allows tracking this same footer across different pages.
Une région repère contentinfo (<footer> au niveau supérieur ou role="contentinfo") a été détectée sur cette page. %(footerLabel_description)s La signature %(footerSignature)s permet de suivre ce même pied de page sur différentes pages.
Contentinfo landmarks identify site-wide footer information such as copyright, privacy policy, and contact links. There should be only one contentinfo per page. It must contain site-level information rather than page-specific footers, and should not be nested inside other landmarks. The signature allows auditors to recognize when the same footer appears on multiple pages.
Les régions repères contentinfo identifient les informations de pied de page à l'échelle du site telles que les droits d'auteur, la politique de confidentialité et les liens de contact. Il ne devrait y avoir qu'un seul contentinfo par page. Il doit contenir des informations au niveau du site plutôt que des pieds de page spécifiques à la page, et ne devrait pas être imbriqué dans d'autres régions repères. La signature permet aux auditeurs de reconnaître quand le même pied de page apparaît sur plusieurs pages.
Screen reader users who navigate by landmarks to quickly access site-wide footer information and legal links, keyboard users who use landmarks for efficient page navigation, users with cognitive disabilities who rely on consistent footer placement for finding important site information
Utilisateurs de lecteurs d'écran qui naviguent par régions repères pour accéder rapidement aux informations de pied de page à l'échelle du site et aux liens légaux, utilisateurs de clavier qui utilisent les régions repères pour une navigation efficace de la page, utilisateurs avec des déficiences cognitives qui s'appuient sur un placement cohérent du pied de page pour trouver des informations importantes du site
Touchpoint Landmarks Points de repère
Impact Low Faible
WCAG , WCAG ,
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 2 WCAG 2
WCAG 2 WCAG 2
WCAG 4 WCAG 4
Location
/html[1]/body[1]/footer[1]
<footer role="contentinfo" aria-label="Footer">
<div class="footer-area-top entry-container">
<div class="container">
<div class="footer-area-widget">
<h2 class="wp-block-heading has-h-3-font-size" id="subscribe-to-our-newsletter"><strong>Subscribe to our newsletter</strong></h2>
</div><div class="footer-area-widget">
<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>
</div><div class
Page defines %(breakpointCount)s responsive breakpoint%(breakpointCount_plural)s in CSS media queries: %(breakpoints)s. Breakpoints range from %(minBreakpoint)spx to %(maxBreakpoint)spx.
La page définit %(breakpointCount)s point%(breakpointCount_plural)s de rupture responsive dans les requêtes média CSS : %(breakpoints)s. Les points de rupture s'étendent de %(minBreakpoint)spx à %(maxBreakpoint)spx.
Responsive breakpoints indicate that the page layout changes at different viewport widths. This is important for accessibility testing because interactive elements, navigation menus, and content visibility may change at different breakpoints. Some accessibility issues (such as content obscuring, focus order, or touch target sizes) may only appear at specific viewport widths. Testing at multiple breakpoints ensures that keyboard navigation, screen reader landmarks, and interactive controls work correctly across all responsive layouts. Mobile-specific layouts often have collapsible menus, different navigation patterns, or alternative content presentation that requires separate accessibility verification.
Les points de rupture responsive indiquent que la mise en page change selon différentes largeurs de fenêtre d'affichage. Ceci est important pour les tests d'accessibilité car les éléments interactifs, menus de navigation et visibilité du contenu peuvent changer à différents points de rupture. Certains problèmes d'accessibilité (comme l'occultation de contenu, l'ordre de focus ou les tailles de cibles tactiles) peuvent n'apparaître qu'à des largeurs de fenêtre spécifiques. Tester à plusieurs points de rupture garantit que la navigation au clavier, les régions repères de lecteurs d'écran et les contrôles interactifs fonctionnent correctement sur toutes les mises en page responsive. Les mises en page spécifiques aux mobiles ont souvent des menus repliables, des modèles de navigation différents ou une présentation de contenu alternative qui nécessite une vérification d'accessibilité séparée.
Mobile device users who view pages at small viewport widths, tablet users at medium breakpoints, users who zoom content which changes the effective viewport, users with screen readers who need consistent landmark navigation across breakpoints, keyboard users who need predictable focus order at all viewport sizes, and touch device users who need adequate target sizes in mobile layouts
Utilisateurs d'appareils mobiles qui consultent les pages avec de petites fenêtres d'affichage, utilisateurs de tablettes aux points de rupture moyens, utilisateurs qui zooment le contenu ce qui modifie la fenêtre d'affichage effective, utilisateurs de lecteurs d'écran qui ont besoin d'une navigation cohérente des régions repères entre les points de rupture, utilisateurs de clavier qui ont besoin d'un ordre de focus prévisible à toutes les tailles de fenêtre d'affichage, et utilisateurs d'appareils tactiles qui ont besoin de tailles de cibles adéquates dans les mises en page mobiles
Touchpoint Page Page
Impact Low Faible
WCAG , WCAG ,
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG . WCAG .
WCAG 0 WCAG 0
WCAG 1 WCAG 1
WCAG 1 WCAG 1
WCAG 2 WCAG 2
WCAG 3 WCAG 3
WCAG 4 WCAG 4
Location
/html